06背景样式

06背景样式

（1）定义

背景样式，是W3C规定一个浏览器如何渲染元素的背景层，用户可以在背景层上增加颜色，图片等效果。

（2）设置背景颜色（background-color）

背景颜色的值常用三类设置方式：

1. reb：字符含义 r→red（红） g→green（绿） b: blue（蓝）.取值范围:rgb(0,0,0)→rgb(255,255,255)

2. rgba：rgba较之rgb多了一个alpha通道用来设置背景透明度，a的取值范围为0~1，（opacity设置整个元素的透明度，背景色rgba设置背景层的透明度）

3. 十六进制： #000000~#ffffff(大小写都可,但是要统一)，#aabbcc简写: #abc

(3) 设置背景图片（background-image）

background-image: 初始值为none。background-image：url(“图片地址”);
常用背景图片格式：

• .jpg 不支持动画，不支持透明，渐进显示，颜色丰富，有损
• .png 不支持动画，支持透明度，颜色更丰富，无损
• .gif 支持动画，256种颜色，2种透明度，渐进显示 .webp 支持动画，高压缩率，高加载速率

（4）背景的渲染层级层级

背景图和背景颜色可以同时设置

（5）背景平铺（background-repeat）

初始值：background-repeat：repeat;

分解：background-repeat: repeat-x;
background-repeat: repeat-y;

不需要时：background-repeat:no-repeat;

注：如果采取默认的背景图片平铺，则背景图片则会延伸到边框之下，如果不重复，则图片不会延伸至边框之下。

（6）背景大小（background-size）

背景图片缩放：background-size: width height；

数字类样式值：

• 百分比：百分比的计算基数为元素的width和height; 像素：直接数值;
• (数值可以写一个或两个,如果只有一个第二个就是默认auto)（auto的意思为:按照此时的图片宽度，等比例拉大图片的高度）

关键字类样式值：

• cover：图片等比缩放直到刚好覆盖背景区域。
• contain：图片等比缩放,直到有一条边触碰到边框就停止。

（7）背景图片显示基点（background-origin）

规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置。默认：padding-box

• content-box: 背景图片内容区左上角开始
• padding-box: 背景图片从内边距左上角开始
• border-box: 背景图片相当于边框左上角开始

（8）背景图片裁剪区域（background-clip）

作用：在背景图原始尺寸大于元素的时候讲图片进行裁剪，保证背景图片在哪个区域可见。

• background-clip：weight height;背景图片从开始裁切
• content-box: 只显示内容区部分的背景图片
• padding-box:显示内容区和内边距部分的背景图片
• border-box: 显示内容区、内边距和边框部分的图片

(9) 背景图片关联依附（background-attachment)

作用：决定背景是在视口中固定的还是随包含它的区块滚动的。

fixed：
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

local：
此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll：
此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

（10）背景图片定位（background-position）

background-position：weight height;

background-position:百分比 百分比;

(11)overflow样式

作用：一个元素的内容太大而超出元素边缘时，浏览器对超出部分的内容如何处理。

• overflow：visible;（默认）,超出内容正常显示。
• overflow：hidden; 超出内容隐藏。
• overflow：scroll; 如果内容比较多，则用滚动条的形式展示多余内容。
• overflow：auto;内容未超出，正常显示；内容超出，显示滚动条。

（12）背景复合型样式写法

background: color image repeat attachment position/size；

不是所有属性都要写上，需要哪个写那个，但是必须按照顺序

多重背景：

background: url(images/1.png) no-repeat scroll 20px 20px/30px 30px, url(images/1.png) no-repeat scroll 20px 20px/30px 30px ,red；