背景样式详解

​ 06-背景样式详解

​ 一、 背景单例型样式之背景颜色（background-color）

​ 背景颜色（background-color）的值常用有三类设置方式（默认颜色为transparent， 可以近似理解为透明）：

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

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

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

​ 二、 背景单例型样式之背景图片（background-image）

​ background-image: 初始值为none
​ background-image：url(“图片地址”);

常用背景图片格式：
.jpg 不支持动画，不支持透明，渐进显示，颜色丰富，有损
.png 不支持动画，支持透明度，颜色更丰富，无损
.gif 支持动画，256种颜色，2种透明度，渐进显示
.webp 支持动画，高压缩率，高加载速率

三、背景单例型样式之背景平铺（background-repeat）

​ background-repeat: 初始值为repeat;(默认重复)

背景平铺：默认值 repeat（repeat-x 、repeat-y ）

​ background-repeat: repeat-x; （图片向X轴平铺）

​ background-repeat: repeat-y;（图片向Y轴平铺）

如果不需要背景图片重复显示：
样式值可设置为no-repeat;

​ 没有设置background-repeat:no-repeat;

**设置了，background-repeat:no-repeat;*

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

设置背景图片的宽高用： background-size: width height；（图片的尺寸）

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

列： background-size: 100px 100px;

数字类样式值：（图片的尺寸）
百分比：百分比的计算基数为元素的width和height;(根据内容区的百分比去变的)
像素：直接数值; （px）
(数值可以写一个或两个,如果只有一个第二个就是默认auto)

关键字类样式值：
cover：图片等比缩放直到刚好覆盖背景区域

contain：图片等比缩放,直到有一条边触碰到边框就停止

背景单例型样式之背景图片显示基点（background-origin）

​ 背景图片显示基点样式background-origin：规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置
1、content-box: 背景图片内容区左上角开始
2、padding-box: 背景图片从内边距左上角开始
3、border-box: 背景图片相当于边框左上角开始

​ 背景单例型样式之背景图片裁剪区域（background-clip）

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

当背景图片的源文件大小远大于元素时，那么即便不设置背景图片大小和背景平铺的时候也能够占满元素的所有区域，并且此时还会有部分图片内容超出元素的边缘

背景图片裁剪区域（background-clip）样式的作用就是，在背景图原始尺寸大于元素的时候讲图片进行裁剪，保证背景图片在哪个区域可见

内容区域没有裁剪前

内容区域裁剪后；
​ 背景单例型样式之背景图片关联依附（ background-attachment ）

​

​ 背景图片关联依附（background-attachment ）样式的作用就是，决定背景是在视口中固定的还是随包含它的区块滚动的。

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

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

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

背景图片定位：

​ background-position：100px 100px (数值大小可以任意取，可以是正、也可以是负)

​ background-position；没有固定在浏览器上

​ background-attachment ：fixed 固定在浏览器上

​ 一般从图片左上角开始

overflow样式

​ 背景复合型样式写法

​ 背景是复合属性: （不是所有属性都要写上，需要写哪个就写那个，但必须要顺序写）
​ background: color image repeat attachment position/size；

​ （列） eg：
​ background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px；
​ 省略部分会被默认值替代,
​ position和size之间要用/分割

背景复合型样式写法：

​ 单个元素可设置多个背景图片

​ background: url(images/1.png) no-repeat scroll, url(images/1.png) no-repeat scroll ，color

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