标签：总结 平铺 repeat color 背景 用法 CSS background 背景图片
CSS背景用法的总结
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
背景颜色
背景图片
背景平铺
背景图片位置
背景图像固定
背复合写法
背景色半透明
1.背景颜色
background-color 属性定义了元素的背景颜色
语法：
background-color: 颜色值;
一般情况下元素背景颜色为transparent(透明)
2.背景图片
background-image 属性定义了元素的背景图片。实际开发常见于logo或一些装饰性对的小图片或者是超大的背景图片，优点是非常便于控制位置。
语法：
background-image: none | url;
参数值 作用 none 无背景图（默认） url 使用绝对或相对地址指定背景图像
3.背景平铺
background-repeat 属性定义了元素的背景平铺
语法：
background-repeat: repeat| no-repeat | repeat-x | repeat-y;
参数值 作用 repeat 在纵向和横向平铺（默认） no-repeat 不平铺 repeat-x 横向上平铺 repeat-y 纵向上平铺
4.背景图片位置
background-position 属性定义了元素的背景图片位置
1.参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，不如left top 和 top left 效果一样。
background-color: left top;- 如果只指定了一个方向名词，另一个值省略，则第二个值默认垂直居中
background-color: left ;2.参数是精确单位
- 如果参数值是精确坐标，那第一个一定是x坐标，第二个一定是y坐标
background-color: x y;- 如果只指定一个数值，则该数值一定是x坐标，另一个默认垂直居中
background-color: x;3.参数是混合单位
- 如果指定的两个值是方位名词和精确单位混合使用，则第一个是x坐标，第二个是y坐标
background-color: left 40px;
5.背景图片固定（背景附着）
background-attachment 属性定义了元素的背景图片是否固定或随着页面的其余部分滚动。
语法：
background-image: scroll | fixed;
参数值 作用 scroll 随对象内容滚动 url 固定
6.背景复合写法
语法：
background: 背景颜色 背景图片地址 背景平铺 背景附着 背景图片位置;
如：
background：transparent url(image.jpg) no-repeat fixed top;
开发中更推荐这样写，更为简单。
7.背景色半透明
background-rgba 属性定义了元素的背景色半透明效果
语法：
background: rgba(x,y,z,a)
注意：
- 最后一个参数是透明的，取值0~1
- 习惯省略0，如rgba(0,0,0,0.3)写为rgba(0,0,0,.3)
- 背景半透明，对内容不受影响
标签：总结,平铺,repeat,color,背景,用法,CSS,background,背景图片 来源： https://blog.csdn.net/qq_43522998/article/details/114377028
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。