深入学习css之background属性

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

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

1、background-color:颜色值

用于设定背景的颜色

3种定义颜色的形式,

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

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

3 三原色表示法,rgbrgb,其中r,g,b分别代表红色,绿色,蓝色,取值范围为0255.

默认值:transparent

注意:

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

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

3.对应的脚本特性为backgroundColor

2、background-imageurl(“图片路径);

用于设定对象的背景图片

默认值:none

注意:

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

对应的脚本特性为backgroundImage

3background-repeat

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

取值:

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

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

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

no-repeat:背景图像不平铺

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

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

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

默认值:repeat

注意:

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

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

对应的脚本特性为backgroundRepeat

4background-position

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

取值:

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

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

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

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

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

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

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

默认值:0% 0%,效果等同于left top

注意:

该属性提供2个参数值CSS3中已允许提供34个值)

如果提供三或四个,每个<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中新加入的

6background-size

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

取值:

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

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

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

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

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

默认值auto

注意:

  • 该属性提供2个参数值(特性值covercontain除外)
  • 如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
  • 如果只提供一个,该值将用于定义背景图像的宽度,第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

原文地址:https://www.cnblogs.com/thinkguo/p/8074577.html