文章目录 前言1.background-color2.background-image3.background-repeat4.background-position5.background-attachment6.背景复合写法7. 背景半透明8.背景总结

---

前言

通过 CSS 背景属性，可以给页面元素添加背景样式，包括background-color、background-image、background-repeat、background-position等

---

1.background-color <style> div { background-color: skyblue; } </style> background-color 属性定义了元素的背景颜色一般情况下默认颜色是transparent（透明），我们也可以手动指定背景颜色为透明色 2.background-image <style> div { background-image: none | url(URL) } </style> background-image属性描述了元素的背景图像背景图片后面的地址，千万不要忘记加URL，同时里面的路径不要加引号 3.background-repeat <style> div { background-repeat: repeat| no-repeat| repeat-x| repeat-y } </style> background-repeat属性定义背景图像的平铺 参数值作用repeat背景图像在纵向和横向上平铺(默认的)no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向平铺 4.background-position <style> div { background-position: x y; } </style> background-position属性可以改变图片在背景中的位置可以使用方位名词或者精确单位 参数值说明length百分数positiontop丨center 丨 bottom 丨left 丨center 丨right 方位名词 5.background-attachment <style> div { background-attachment : scroll | fixed } </style> background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动 参数作用scroll背景图像是随对象内容滚动fixed背景图像固定 6.背景复合写法

属性的值的书写顺序官方没有强制的标准。为了可读性，建议如下写:

<style> div { background: transparent url(URL) repeat-x fixed top; } </style> background： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 7. 背景半透明 <style> div { background : rgba(0,0,255,0.5); } </style> 最后一个参数是alpha 透明度 ，取值范围在0~1之间背景半透明是指盒子背景半透明，盒子里面的内容不受影响 8.背景总结 属性作用值background-color背景颜色预定义的颜色值/十六进制/RGB代码background-image背景图片url(图片路径)background-repeat是否平铺repeat/ no-repeat /repeat-x/repeat-ybackground-position背景位置length/position 分别是x 和y坐标background-attachment背景附着scroll(背景滚动) /fixed(背景固定)背景简写书写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置背景色半透明背景颜色半透明background : rgba(0,0,0,0.3);后面必须是四个值

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。