【网页前端】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 引入该文件，即可完成浏览器默认样式的清空。
代码如下：
注意：这里不用* 通配符，是为了加快网页效果加载
腾讯云开发者
