1、background-color背景颜色属性

  ①颜色表示方法

    英语单词:red   blue   purple    skyblue。

    rgb:r代表红色   g代表绿色   b代表蓝色    也就是颜色的三原色。

    十六进制:#0xff ff ff

2、background-image属性

  background-image:url(images/i.jpg);背景天生是会被平铺满的。

3、background-repeat属性

  background-repeat:no-repeat;控制background-image里的图片不是平铺满,而是只出现一次。

  background-repeat:repeat-x;控制background-image里的图片不是平铺满,而是横向重复。

  background-repeat:repeat-y;控制background-image里的图片不是平铺满,而是纵向重复。

4、要妙用repeat这个属性    用小图做大背景

5、background-position背景定位属性(重点)

                 X            Y

  ①background-position:向右移动量 向下移动量;               移动量可以是负数  例如:

  ②css精灵:又叫css雪碧技术,是一种css图像合并技术。该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

  Css精灵有什么优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。

  ③用单词表示:background-position:描述左右的单词    描述上下的单词。比如:background-position:center top;左右居中  上下居顶。

用途:大背景图的溢出处理。

  这个属性经常用于图片比浏览器大得多的时候,但是我们还想让图片居中的时候,这个时候就需要background-position去定位一下,利用center属性就能搞定。例如暗黑破坏神 台湾的官网背景图。

  这个属性还有用于通栏banner图。其实这个banner图是一个超长的图。

6、background-attachment属性

  这个属性设置为fixed,作用就是用于背景图(没有设置no-repeat的背景图)不随着滚动条滚动,但是表层的文字可以随着滚动条的滚动而滚动。

7、background综合属性

  background:red url(1.jpg) no-repeat 100px 100px fixed;

  等价于:

  background-image:url(1.jpg);

  background-repeat:no-repeat;

  background-position:100px 100px;

  background-attachment:fixed;

background系列属性的更多相关文章

  1. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  2. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  3. background复合属性详解(上):background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  4. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  5. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  6. 系列属性(offset、scroll、client)

    一.offset系列属性 <div id="dv"></div> <!-- 已在style标签里设置div宽高各100px --> <sc ...

  7. js offset系列属性

    offsetParent:返回该元素有定位的父级,如果父级都没有定位则返回body offsetTop:返回元素相对父级(带有定位的父级)上方的偏移 offsetLeft:返回元素相对父级(带有定位的 ...

  8. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  9. background相关属性

    background-origin: 规定 background-position 属性相对于容器的哪一部分来定位. padding-box 背景图像相对于内边距框来定位:(默认) border-bo ...

随机推荐

  1. React和动态网站接口的经济学

    来自: React and the economics of dynamic web interfaces 自从2000开始我就一直在做web开发,曾见过很多以各种库和框架的起起落落,这些库和框架作为 ...

  2. mysql grant授权

    MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant sele ...

  3. 删除cygwin

    由于cygwin 学习了linux 的用户所有者的方式,要删除有一定困难. 所以要右击  然后点 获取管理员所有权  几分钟之后  就可以删了

  4. eclipse配置tomcat及修改tomcat默认根目录

    1.安装eclipse for j2ee和tomcat: 2.下载tomcat对eclipse的插件:http://www.eclipsetotale.com/tomcatPlugin.html 下载 ...

  5. java获取数据库的列名、类型等信息

    当你使用和学习JDK的时候,可以查看并学习它所提供给你的两个ResultSetMetaData 和DataBaseMetaData类的源码并很好的了解它们的实现原理和思路,JDBC中提供有两种源数据, ...

  6. POJ 1182 食物链 经典并查集+关系向量简单介绍

    题目: 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有 ...

  7. php 常用的JS

      function doit(){ var sel_val=$("#type").val(); if (sel_val=='') { $("#bigClassId1&q ...

  8. char与varchar、nvarchar区别

    char     char是定长的,也就是当你输入的字符小于你指定的数目时,char(8),你输入的字符小于8时,它会再后面补空值.当你输入的字符大于指定的数时,它会截取超出的字符.    nvarc ...

  9. 初识Selenium(三)

    浅谈基于Selenium的Web自动化测试框架 发表于:2011-4-25 10:58  作者:邵育亮   来源:51Testing软件测试网原创 字体:大 中 小 | 上一篇 | 下一篇 | 打印 ...

  10. Call an activity method from a fragment

    From fragment to activty: ((YourActivityClassName)getActivity()).yourPublicMethod(); From activity t ...