【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式

这里是【前端网页】，关注我学习前端不迷路
如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位点赞评论收藏⭐️

专栏介绍

【前端网页】 目前主要更新HTML，一起学习一起进步。

本期介绍

本期主要介绍CSS进阶之元素的背景以及清除浏览器默认样式

文章目录

1. 简述

2. 背景颜色

2.1 概述及格式

2.2 透明度设置-rgba

3. 背景图片

3.1 背景重复设置

3.2 多背景图片设置

3.3 背景图片位置

3.4 背景图片尺寸调整

3.5 背景附着设置

4. 总结

5. 清除浏览器默认样式

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 引入该文件，即可完成浏览器默认样式的清空。

代码如下：

 

注意：这里不用* 通配符，是为了加快网页效果加载