目录
目录
背景样式
默认情况下，背景区域覆盖的范围是元素内容 + 内边距 + 边框。
基础属性
background-color
background-color 属性用于设置元素的背景颜色。
transparent透明背景- 颜色值
注意 半透明浮层的背景颜色建议使用 rgba() 而不是 opacity 设置透明度。
background-image
background-image 属性用于给元素设置一张或多张背景图。
.content { background-image: url(../images/bg.png); }
.header { background-image: linear-gradient(#ddd, #fff); /* 渐变背景 */ }
.icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR......GRiIvPjwvZz48L3N2Zz4=); }
background-repeat
background-repeat 属性用于控制背景图片的重复方式。
no-repeat不重复repeat-x水平方向重复repeat-y垂直方向重复
background-position
background-position 属性用于设置背景图的位置。
CSS Sprites（CSS 精灵 | 雪碧图）
CSS Sprites 是指将多张图片（一般是小图标）合成一张大图，不同元素共用这张大图作为背景图，并给这些的元素设置相应的 background-position 值，在达到预期显示效果的同时，减少 HTTP 请求数的一种前端优化手法。
background
background 属性是背景相关属性的缩写。
.avatar { background: #fff url(avatar.svg) no-repeat left center; }
多重背景
进阶属性
background-size
CSS3 background-size 属性用于设定背景图片的大小。IE9 以下不支持
cover缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。contain缩放背景图片以完全装入背景区，可能背景区部分空白。100%等数值
.logo { background-size: 200px 60px; }
background-clip
CSS3 background-clip 属性用于设置元素背景区域覆盖的范围。
border-box覆盖至边框的最外围padding-box覆盖至内边距的最外围content-box仅覆盖元素内容区域
参考链接
若愚 · 2021/09/23 11:53 · 前端基础_css_11.背景样式.md.txt
