深入学习css之background属性

 

css中允许应用纯色作为背景，也允许使用图片作为背景。

background一共有8个对应的属性：

1、background-color：颜色值

用于设定背景的颜色

有3种定义颜色的形式，

1， 颜色关键字表示法，可直接用英文单词来定义，比如red，blue，green等。

2， 16进制表示法，用#000000到#ffffff区间内的16进制数来表示。

3， 三原色表示法，rgb（r，g，b）,其中r,g,b分别代表红色，绿色，蓝色，取值范围为0到255.

默认值：transparent

注意：

1.当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。

2.如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。

3.对应的脚本特性为backgroundColor。

 

2、background-image：url(“图片路径”);

用于设定对象的背景图片

默认值：none

注意：

如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。

对应的脚本特性为backgroundImage。

3、background-repeat：

设置或检索对象的背景图像如何铺排填充。

取值：

repeat-x：背景图像在横向上平铺

repeat-y：背景图像在纵向上平铺

repeat：背景图像在横向和纵向平铺

no-repeat：背景图像不平铺

round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）

space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

但ie览器还不支持以上两个新属性。

 

默认值：repeat

 

注意：

允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。

如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值 

对应的脚本特性为backgroundRepeat。

 

4、background-position

用于设置或检索对象的背景图像位置。

取值：

<percentage>：用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小

<length>：用长度值指定背景图像填充的位置。可以为负值。

center：背景图像横向和纵向居中。

left：背景图像在横向上填充从左边开始。

right：背景图像在横向上填充从右边开始。

top：背景图像在纵向上填充从顶部开始。

bottom：背景图像在纵向上填充从底部开始

默认值：0% 0%，效果等同于left top

注意：

该属性提供2个参数值（CSS3中已允许提供3，4个值）。

如果提供三或四个，每个<percentage>或<length>偏移前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。

示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px 

缩写方式：

background:url(test1.jpg) no-repeat right 20px bottom 20px;

你也可以设置3个参数值： 

拆分方式：

background:url(test1.jpg) no-repeat left bottom 10px;

要注意的是：设置3个或4个值，偏移量前必须有关键字。也就是说，形如："10px bottom 20px" ，这样的参数设置是错误的，因为10px前面没有关键字。

如果提供两个，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。

对应的脚本特性为backgroundPosition。

 

5、background-attachment：

设置或检索背景图像是随对象内容滚动还是固定的。

取值：

fixed：背景图像相对于窗体固定。

scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

默认值：scroll

 

还有三个是css3中新加入的

6、background-size

检索或设置对象的背景图像的尺寸大小。

取值：

<length>：用长度值指定背景图像大小。不允许负值。

<percentage>：用百分比指定背景图像大小。不允许负值。

auto：背景图像的真实大小。

cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

默认值：auto

注意：

• 该属性提供2个参数值(特性值cover和contain除外)。
• 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
• 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。
• 对应的脚本特性为backgroundSize。

1. 不支持写入 <' background '> 缩写方式。
2. iOS6.1及更早cover值在body上有bug；同时background-size: cover; background-attachment: fixed;配合时也有bug。

 

7、background-clip：指定对象的背景图像向外裁剪的区域。 

 

取值：

padding-box：从padding区域（不含padding）开始向外裁剪背景。

border-box：从border区域（不含border）开始向外裁剪背景。

content-box：从content区域开始向外裁剪背景。

text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果

 

默认值：border-box

 

注意：

1. text属性值，目前为webkit only

　　　2.对应的脚本特性为backgroundClip。

 

 8、background-origin

取值：

padding-box：从padding区域（含padding）开始显示背景图像。

border-box：从border区域（含border）开始显示背景图像。

content-box：从content区域开始显示背景图像。

默认值：padding-box

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有