background

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了background相关的知识,希望对你有一定的参考价值。

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

以上是关于background的主要内容,如果未能解决你的问题,请参考以下文章

领跑计划Day006Css

领跑计划Day006Css

vue项目添加背景图报路径不存在

vue项目添加背景图报路径不存在

在一个规则中,目标元素具有多个类

怎样用css控制整个网页的文字背景是一样的!请高手指点!谢谢~