0
点赞
收藏
分享

微信扫一扫

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


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

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

👀专栏介绍

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

👀本期介绍

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

文章目录

​​1. 简述​​

​​2. 背景颜色​​

​​2.1 概述及格式​​

​​2.2 透明度设置-rgba​​

​​3. 背景图片​​

​​3.1 背景重复设置​​

​​3.2 多背景图片设置​​

​​3.3 背景图片位置​​

​​3.4 背景图片尺寸调整​​

​​3.5 背景附着设置​​

​​4. 总结​​

​​5. 清除浏览器默认样式​​

1. 简述


在网页中,到处能够看到各种背景(背景颜色、背景图片 等),在页面中,元素是可以通过设置

背景展示

更加丰富的效果,这是构成我们网页多样化的重要部分。



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


下面我们开始讲解元素背景

2. 背景颜色

2.1 概述及格式

用于设置标签的背景颜色

格式: background-color : 颜色值 ;

注意,背景颜色的默认值是透明,即为: transparent

颜色设置方式:


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


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

2.2 透明度设置-rgba

我们除了可以用三种设置具体的背景颜色外,还可以设置背景颜色的透明度。

格式: background-color : rgba ( 红 , 绿 , 蓝 , 透明度 );

注意:红绿蓝的取值范围为 0~255

透明度的取值范围为: 0.0~1.0 。

0 为完全透明, 1 为不透明

准备代码:要求将蓝色 div 调整为半透明


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


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

 

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

示例代码:

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

展示效果:(蓝色已为半透明)

 

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


3. 背景图片

3.1 背景重复设置


用于设置元素背景图片。

格式: background-image : url ( "图片路径" );

例如:某个小狗爪子图片

,作为背景图片引入一个长宽 25 的 DIV 标签中,



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


因为图片太小,所以为了铺满背景, CSS 采取了重复显示多个的策略。

若需要对背景图片是否重复显示进行调整,有以下几个常见设置

 

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

3.2 多背景图片设置

元素的背景图片,可以同时设置多个。

格式: background-image : url ( "" ), url ( "" )

注意:多张图片之间用“逗号”分隔

准备代码: 同时展示两张背景图片


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


示例代码: background-image : url ( "../img/czxy.png" ), url ( "../img/itcast.png" );

效果图: 同时显示两张背景图片



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


注意:一般我们仅显示一张背景图片即可,如需显示多张,可以用逗号分隔。

多背景图片一般和 背景图片位置连用,否则容易出现上图效果的图片重叠。


3.3 背景图片位置


简述及格式


在多背景图片中,一般我们会为某张背景图片设置特有位置,防止 出现下图 背景图片重叠。



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


格式: background-position : 水平位置 垂直位置 ;

位置参数值:



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


下面我们来具体说明两种不同的参数值方式。

准备代码

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


快速定位 - 方位词


快速定位将元素内部切分成了 9 部分。



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


例如:

我们需要将背景图片放置到左下角,位置写法: left bottom

我们需要将背景图片放置到正中间,位置写法: center center

我们需要将背景图片放置到右上角,位置写法:right top


示例代码:

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

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

效果图:


注意:以上写法中,若需要把元素置于左上: left top

也可以写成 top left ,效果相同,但不建议,建议使用“水平 垂直” 写法,方便自己记忆。

精确定位 - 具体数值

我们可以通过设置具体数值,来精确定位。

格式: background-position : 水平位置 垂直位置 ;


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


示例,对两张图片进行位置设置: background-image :

url ( "../img/czxy.png" ), url ( "../img/itcast.png" );


精确定位写法:

 

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


注意事项


1 、 如果多张背景图片仅写 一对位置值,该位置值同时作用多张背景图片



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

2、 如果仅指定了 一个位置值,另一个位置值默认为 50%/center

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

 

3、位置、百分比、像素可以混合书写,但不建议,不利于阅读

3.4 背景图片尺寸调整


背景图片也是可以调整大小的。


格式: background-size : 宽度 高度 ;



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


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

注意:如果要为多张图片同时设置尺寸,可以用逗号分隔(若无逗号分隔,就是为多张图片同时设

置)

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

3.5 背景附着设置

有时当元素过大,背景图片不够长时, 滚动页面,用户体验会比较差。

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

我们可以设置背景附着,这样即使浏览器上下滚动,背景也是固定的,让用户感受到层次感。

格式:background-attachment:关键字;

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

 

准备代码:

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

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


示例: background-attachment : fixed ;


效果:



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


4. 总结

元素的背景可以进行多方面设置。

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


5. 清除浏览器默认样式

浏览器自带默认样式, body 的字体,各种标签的内容样式等。

若我们需要去除浏览器自带的默认样式,则需要写大量代码,才能将浏览器的默认样式清空。

这里为各位提供一套清空浏览器默认样式的 CSS 代码,

各位只需要将其保存成 CSS 文件,每次 HTML 引入该文件,即可完成浏览器默认样式的清空。


代码如下:



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


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

 

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

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

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

举报

相关推荐

0 条评论