学习随笔——CSS背景样式——2020.11.10

学习随笔——CSS背景样式——2020.11.10

（一）背景颜色：background-color：颜色

• 设置背景色
• 颜色名称：例如red
• 颜色16进制数值：例如#FF0000
• rgb色值：rgb(255,0,0)，rgba()
• transparent：默认背景透明

（二）背景图像：background-image：url（图片地址）

• url()：指向背景图片
• none：无背景图片，默认

（三）背景重复方式：background-repeat

• repeat：默认，垂直水平重复
• repeat-x：水平方向重复
• repeat-y：垂直方向重复
• no-repeat：不重复

（四）背景图像位置：background-position：水平，垂直（取值可以是关键字，百分比，绝对值）

• 水平：left左，center中，right右
• 垂直：top上，center中，bottom下
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• 如果只定义了第一个值，那么第二个必然是center
• 百分比x%,y%：如果只定义了第一个值，另一个必然是50%
• 绝对值x,y：如果只定义了第一个，另一个必然是50%

备注：
1.css雪碧图实现背景就是基于背景定位（取值为绝对数值）
2.背景图片的显示原则

• 当容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素
• 当容器尺寸小于图片尺寸，只显示元素范围以内的背景区域。如果设置了位置，则按照位置的设置来显示；如果没有设置位置，则从背景图左上角开始显示

（五）background复合用法

• background:背景颜色 背景图片 背景重复方式 背景位置 背景依附性
• background:#fff url(图片地址) no-repeat left center fixed
• 属性值的顺序可调换，建议按照上述顺序书写
• 复合写法中不支持背景尺寸
• 如果需要定义背景尺寸，需要单独定义background-size属性

（六）背景依附性：background-attachment

• 设置背景图像是否固定或者随着页面的其余部分滚动
• scroll：默认值，背景图像会随着页面其余部分滚动而滚动
• fixed：背景固定，不随滚动条滚动

（七）背景尺寸：background-size：宽度（水平） 高度（垂直） （取值可以是：绝对值，百分比，关键字）
CSS3之前，背景图像的大小由图像的实际大小决定，而CSS3可以指定背景图片的大小可以设置成关键字，像素值，百分比（该百分比是相对于该背景所在元素的宽度和高度的百分比）

• 20px 20px
• 50% 50%
• auto——设置背景宽度或高度后，另一个值可以使用auto自适应
• contain——背景长度比例不变，将背景完整地显示在元素内，背景不会被裁切，元素的上下或者左右可能有留白
• cover——背景长度比例不变，将背景图像缩小或拉伸，铺满整个元素，元素上上下下和左右都不会留白，背景图片会有些部分被裁剪

（八）同一元素中显示多个背景
可以设置多个背景，用逗号隔开

• background-image:url(),url(),url();
• background-repeat:no-repeat,repeat-x,repeat-y;
• background-position:3% 98%,center,top;
• 多个背景复合写法：background:url(“one.jpg”)right bottom no-repeat,url(“two.jpg”)left top repeat-x;
  在多个复合写法中，如果想要添加背景颜色，那么就必须在最后一张背景图片的url前面添加

（九）background-origin（设置背景图片的定位区域，属性值有三个）

• border-box 背景从border区域就开始
• padding-box 背景从padding区域开始
• center-box 背景只从正文开始

（十）background-clip（设置背景颜色的绘制区域，属性值有两个）

• padding-box 背景颜色从padding区域开始
• content-box 背景颜色只从正文开始

（十一）背景颜色渐变gradient