CSS3中关于新增背景系列background的详解

1. 回顾一下之前学习过的background属性

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background-position
1.5 background-attchment
1.6 background

2. CSS3新增的background属性

2.1 background-origin
2.2 多重背景
2.3 background-size

1.1 背景颜色属性:background-color

颜色的表示方法有3种:单词、rgb表示法、十六进制表示法

1. 单词: 能够用单词来表述的,都是简单颜色

2. rgb表示法

rgb表示三原色“红”red、“绿”green、“蓝”blue 。
光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。

用逗号隔开,r、g、b的值,每个值的取值范围0~255,一共256个值

绿色:
background-color: rgb(0,255,0);  
蓝色:
background-color: rgb(0,0,255);

黑色:(光学显示器,每个元件都不发光,黑色)
background-color: rgb(0,0,0);

3. 十六进制表示法

所有用#开头的值,都是16进制的。

红色:
background-color: #ff0000;

16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。
ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);

补充:
十进制中的基本数字(一共10个):0、1、2、3、4、5、6、7、8、9
十六进制中的基本数字(一共16个):0、1、2、3、4、5、6、7、8、9、a、b、c、d、d、e、f

十六进制中,13 这个数字表示什么?
表示1个16和3个1。 那就是19。 这就是位权的概念,开头这位表示多少个16,末尾这位表示多少个1。

1.2 background-image

用于给盒子加上背景图片。背景天生是会被铺满的。

background:url(images/1.jpg);

1.3 background-repeat

设置背景图是否重复的,重复方式的。

background-repeat:no-repeat; 不重复 background-repeat:repeat-x; 横向重复 background-repeat:repeat-y; 纵向重复

1.4 background-position

背景定位属性

background-position:向右移动量 向下移动量

用单词描述:

描述左右的词: left、 center、right
描述上下的词: top 、center、bottom

右下角:background-position: right bottom;

1.5 背景图片是否滚动(background-attchment)

scroll:滚动。默认值 fixed:固定。不会随着滚动条的滚动而滚动 local

1.6 background综和属性

background属性和border一样,是一个综合属性:

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

等价于:
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

可以任意省略部分:

background: red;

如果盒子又有背景图片,又有背景颜色。实际上以显示图片为主,富裕的地方,用颜色填充。

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

2.1 背景图片的基准点(background-origin)

border-box: 忽略边框,直接从边框的起始0,0点开始平铺 padding-box:默认值,忽略padding,直接从padding的起始0,0点开始平铺 content-box:从内容部分开始平铺,会预留出padding的位置。所以说padding会对它造成影响

2.2 多重背景

CSS3-新增背景系列background。背景图片之间用逗号隔开,可以写多组,最先渲染的图片有可能会遮住后面渲染的图片。

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 控制背景图片的大小(background-size)

background-size:值

取值:

**长度值**px 百分比:以盒子宽度为参照 auto:背景图片的真实大小

contain完全显示(当图片的宽度或是高度在缩放的时候有一个“碰到“了盒子的边缘,则停止变化)

cover完全铺满(将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器)

当只有一个值,如宽度实现拉伸,高度会默认auto,保持等比例。
当有两个值,宽度和高度会分别拉伸到对应的值,可能会变形。

以上就是CSS3中关于新增背景系列background的详解的详细内容,更多请关注智伍应用其它相关文章!