CSS背景

最新推荐文章于 2024-06-28 10:57:06 发布

fenfei~、

最新推荐文章于 2024-06-28 10:57:06 发布

阅读量75

点赞数

文章标签： css

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

通过css背景属性，可以给页面元素添加背景样式
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

background-color 定义了元素的背景颜色。

background-color:颜色值;

一般情况下元素颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置，（精灵图也是一种运用场景）

background-image : none | url(url)

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat : repeat | no-repeat | repeat-x |repeat-y

利用background-position属性可以改变图片在背景中的位置。

background-position ：x y;

参数代表的意思是： x坐标和y坐标，可以使用方位名词或者精确单位。

参数值	说明
length	百分数 /由浮点数字和单位标识符组成的长度值
position	top / center / bottom / center / right 方位名词

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment后期可以制作视差滚动效果。

background-attachment : scroll | fixed

参数	作用
scroll	背景图像是随着对象内容滚动
fixed	背景图像固定

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量，当使用简写属性时，没有特斯那个的书写顺序，一般习惯约定顺序为：
background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

backgrund: transparent url(image.jpg) repeat-y fixed top;

这是实际开发中，我们更提倡的写法。

css3为我们提供了背景颜色半透明效果

background: rgba(0,0,0,0.3);

属性	作用	值
background-color	背景颜色	预定义的颜色值/ 十六进制/ RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repeat/ no-repeat /repeat-x /repeat-y
background-position	背景位置	length /position 分别是x和y坐标
background-attachment	背景附着	scroll（背景滚动) / fixed（背景固定）
背景简写	书写更简单	背景颜色背景图片路径背景平铺背景滚动背景位置
背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3);后面必须是4个值

背景图片：实际开发常见于logo或者一些装饰的小图片或者是超大的背景图片，有点事非常便于控制位置。（精灵图也是一种运用场景）。

关注