标签：平铺 repeat 背景图片 背景 元素 723 background 图像 CSS
CSS背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
1.背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者时超大的背景图片，优点是非常便于控制位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3EWYnihF-1627359979654)(F:\learn_note\723CSS元素显示背景\image-20210723175640770.png)]
2.背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性
background-repeat ：repeat | no-repeat | repeat-x | repeat-y
默认平铺
3.背景图片位置
利用background-position属性可以改变图片在背景中的位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEhD9Jyy-1627359979655)(F:\learn_note\723CSS元素显示背景\image-20210723180917894.png)]
1.参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2.参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标
- 如果只指定一个数值，那该数值一点是x坐标，另一个默认垂直居中
3.参数是混合单位
- 第一个值是x坐标，第二个值是y坐标
4.背景图像固定（背景附着)
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment可以做一些视差滚动的效果
background-attachment ：scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
5.背景的复合写法
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4JGQwgKz-1627359979657)(F:\learn_note\723CSS元素显示背景\1627094324101.png)]
6.背景色半透明
background：rgb (0, 0, 0, 0.3);
- 最后一个参数是alpha透明度，取值范围在0~1之间
- 习惯把 0.3 的 0 省略掉 ， 写为 background ： rgba（0,0,0，.3);
- 只是让盒子背景半透明，内容不受影响
- IE9+版本以上支持
7.总结
| 属性 | 作业 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url（图片路径） |
| background-repeat | 是否平铺 | repea/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x 和y 坐标 |
| background-attachment | 背景附着 | scroll（背景滚动）/fixed（背景固定） |
| 背景简写 | 书写更简单 | 背景颜色 背景图片 背景平铺 背景滚动 背景位置 |
| 背景色半透明 | 背景颜色半透明 | background：rgba（0,0,0,0.3）；后面必须是4个值 |
背景位置 |
| 背景色半透明 | 背景颜色半透明 | background：rgba（0,0,0,0.3）；后面必须是4个值 |
标签：平铺,repeat,背景图片,背景,元素,723,background,图像,CSS 来源： https://blog.csdn.net/weixin_46623496/article/details/119140757
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。