【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS进阶之元素的背景以及清除浏览器默认样式
文章目录
1. 简述
在网页中，到处能够看到各种背景（背景颜色、背景图片 等），在页面中，元素是可以通过设置
背景展示
更加丰富的效果，这是构成我们网页多样化的重要部分。
下面我们开始讲解元素背景
2. 背景颜色
2.1 概述及格式
用于设置标签的背景颜色
格式：
background-color
:
颜色值
;
注意，背景颜色的默认值是透明，即为：
transparent
颜色设置方式：
2.2 透明度设置-rgba
我们除了可以用三种设置具体的背景颜色外，还可以设置背景颜色的透明度。
格式：
background-color
:
rgba
(
红
,
绿
,
蓝
,
透明度
);
注意：红绿蓝的取值范围为 0~255
透明度的取值范围为：
0.0~1.0
。
0
为完全透明，
1
为不透明
准备代码：要求将蓝色
div
调整为半透明
示例代码：
展示效果：（蓝色已为半透明）
3. 背景图片
3.1 背景重复设置
用于设置元素背景图片。
格式：
background-image
:
url
(
"图片路径"
);
例如：某个小狗爪子图片
，作为背景图片引入一个长宽
25
的
DIV
标签中，
因为图片太小，所以为了铺满背景，
CSS
采取了重复显示多个的策略。
若需要对背景图片是否重复显示进行调整，有以下几个常见设置
3.2 多背景图片设置
元素的背景图片，可以同时设置多个。
格式：
background-image
:
url
(
""
),
url
(
""
)
注意：多张图片之间用“逗号”分隔
准备代码： 同时展示两张背景图片
示例代码：
background-image
:
url
(
"../img/czxy.png"
),
url
(
"../img/itcast.png"
);
效果图： 同时显示两张背景图片
注意：一般我们仅显示一张背景图片即可，如需显示多张，可以用逗号分隔。
多背景图片一般和 背景图片位置连用，否则容易出现上图效果的图片重叠。
3.3 背景图片位置
简述及格式
在多背景图片中，一般我们会为某张背景图片设置特有位置，防止 出现下图 背景图片重叠。
格式：
background-position
:
水平位置 垂直位置
;
位置参数值：
下面我们来具体说明两种不同的参数值方式。
准备代码
快速定位
-
方位词
快速定位将元素内部切分成了
9
部分。
例如：
我们需要将背景图片放置到左下角，位置写法：
left bottom
我们需要将背景图片放置到正中间，位置写法：
center center
我们需要将背景图片放置到右上角，位置写法：right top
示例代码：
效果图：
注意：以上写法中，若需要把元素置于左上：
left top
也可以写成
top left
，效果相同，但不建议，建议使用“水平 垂直” 写法，方便自己记忆。
精确定位
-
具体数值
我们可以通过设置具体数值，来精确定位。
格式：
background-position
:
水平位置 垂直位置
;
示例，对两张图片进行位置设置：
background-image
:
url
(
"../img/czxy.png"
),
url
(
"../img/itcast.png"
);
精确定位写法：
注意事项
1
、 如果多张背景图片仅写 一对位置值，该位置值同时作用多张背景图片
2、 如果仅指定了 一个位置值，另一个位置值默认为 50%/center
3、位置、百分比、像素可以混合书写，但不建议，不利于阅读
3.4 背景图片尺寸调整
背景图片也是可以调整大小的。
格式：
background-size
:
宽度 高度
;
注意：如果要为多张图片同时设置尺寸，可以用逗号分隔（若无逗号分隔，就是为多张图片同时设
置）
3.5 背景附着设置
有时当元素过大，背景图片不够长时， 滚动页面，用户体验会比较差。
我们可以设置背景附着，这样即使浏览器上下滚动，背景也是固定的，让用户感受到层次感。
格式：background-attachment:关键字;
准备代码：
示例：
background-attachment
:
fixed
;
效果：
4. 总结
元素的背景可以进行多方面设置。
5. 清除浏览器默认样式
浏览器自带默认样式，
body
的字体，各种标签的内容样式等。
若我们需要去除浏览器自带的默认样式，则需要写大量代码，才能将浏览器的默认样式清空。
这里为各位提供一套清空浏览器默认样式的
CSS
代码，
各位只需要将其保存成
CSS
文件，每次
HTML
引入该文件，即可完成浏览器默认样式的清空。
代码如下：
注意：这里不用* 通配符，是为了加快网页效果加载 
浙公网安备 33010602011771号