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
颜色的表示方法有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。
用于给盒子加上背景图片。背景天生是会被铺满的。
background:url(images/1.jpg);
设置背景图是否重复的,重复方式的。
background-repeat:no-repeat; 不重复 background-repeat:repeat-x; 横向重复 background-repeat:repeat-y; 纵向重复
背景定位属性
background-position:向右移动量 向下移动量
用单词描述:
描述左右的词: left、 center、right
描述上下的词: top 、center、bottom
右下角:background-position: right bottom;
scroll:滚动。默认值 fixed:固定。不会随着滚动条的滚动而滚动 local
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;
border-box: 忽略边框,直接从边框的起始0,0点开始平铺 padding-box:默认值,忽略padding,直接从padding的起始0,0点开始平铺 content-box:从内容部分开始平铺,会预留出padding的位置。所以说padding会对它造成影响
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;
background-size:值
取值:
**长度值**px 百分比:以盒子宽度为参照 auto:背景图片的真实大小
contain:完全显示(当图片的宽度或是高度在缩放的时候有一个“碰到“了盒子的边缘,则停止变化)
cover:完全铺满(将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器)
当只有一个值,如宽度实现拉伸,高度会默认auto,保持等比例。
当有两个值,宽度和高度会分别拉伸到对应的值,可能会变形。
Atas ialah kandungan terperinci CSS3中关于新增背景系列background的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!