CSS的背景版块知识

Posted 2023-03-08 鱿年年

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS的背景版块知识相关的知识，希望对你有一定的参考价值。

😊博主页面：鱿年年

👉博主推荐专栏：《WEB前端》👈

💓博主格言：追风赶月莫停留，平芜尽处是春山❤️

前言

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

一、背景颜色

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

background-color：颜色值；

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

二、背景图片

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

background-image ：none | URL（URL）

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

三、背景平铺

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

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

参考值	作用
repeat	背景图像在纵向和横向上平铺（默认值）
no_repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图片在纵向上平铺

注意：

页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

四、背景图片位置

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

background-position：x y;

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

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

4.1参数是方位名词

如果指定的两个值都是方位名词，则跟两个值前后顺序无关，比如left top 和top left 效果是一致的。

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

4.2参数是精确单位

如果参数值是精确单位，那么第一个肯定是X坐标，第二个一定是Y坐标。

如果只指定一个数值，那么该数值一定是X坐标，另外一个默认垂直居中。

4.3参数是混合单位

如果是指定的两个值是精确单位和方位名词混合使用的话，则第一个值是X坐标，第二个值是Y坐标。

五、背景图像固定（背景附着）

background-attachment 属性是设置背景图像是否需要固定或者随着页面的其余部分滚动起来。

在后期的使用场景是制作视差滚动的效果。

background-attachment ：scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动（默认值）
fixed	背景图像固定

六、背景的复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background中。从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定写的顺序是：

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

background： transparent URL(image.jpg) repeat-y fixed top ;

这个才是实际开发中书写的代码格式。

七、背景色半透明

CSS3 为我们提供了背景颜色办透明的效果。

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

最后一个参数是alpha 透明度，取值范围在0~1之间。
我们习惯把0.3的0省略掉，写为 back不round：rgba（0,0,0，.3）；
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响的
注：CSS3新增的属性只有是IE9+版本浏览器才支持的
但是现实实际开发中，我们不太关注兼容性写法的，可以放心使用的哦

八、背景总结

属性	作用	值
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个值。