background-position的妙用

xiaoxiao2021-03-01  15

示例

在浏览网页时,我们经常会发现一些小图标,就像这样的: 而我们在浏览网页的时候,一个网站上经常会有十几个甚至几十个这样的小图标,像这样的: 这样的:

我们当然可以使用几十个 img 标签,然后指定每个图片的路径来找到图片,但是这样一来,我们将会浪费大量的时间在给图片取名字、写路径上,而且,一个网站同时加载这么多的img标签,势必会对网页的加载速度起到一定程度的影响,当网页上有上百的标签之后,这种影响会慢慢体现出来,影响了用户体验,那么,为了解决这个问题,我们应该怎么做呢?

查看源码

我们以QQ空间网页版的这个装扮小图标为例 去查看一下它的源码: 我们发现,它的这个小图标居然是用 i 标签来写的,看到这里,可能你要发问了,i 标签不是指定斜体的标签吗?

我们可以看到,这里的 i 标签中并没有实际内容,这只是一个空标签,这个标签出现的实际意义只是划分一个区域而已,你可能又要问了,划分区域不是应该用 div 标签或者 span 标签吗?为什么用这个?

众所周知,div标签是块级元素,一旦声明就要占走一行的空间,即使我们可以通过float或者display属性让它不占一行的空间,但是网页中有数十个小图标的时候,每个小图标都这样做的话,对于开发效率的影响简直是灾难性的,毕竟,没人想加班对吧

至于为什么不用 span 而用 i 标签,纯粹是因为。。。。。。i 标签比 span 标签省了三个字。。。

解决了 i 标签的问题,现在我们来看看这个 i 的样式:

我们发现,这个 i 标签只是单纯地加了一个背景图片而已,原来,我们的小图标效果就是通过给一个 i 标签的区域加背景图来实现的,我们再来看看这个背景图片的资源路径,我们右键点击这个路径,选择 “open in new tab” 打开这个资源,出现了如下场景:

这里可以看到这个网页上的所有小图标

实现原理

原来,网页上的所有小图标都指向同一个路径,也就是上面这个图片的路径,然后,我们给每个承载小图标的标签都声明了宽度和高度,再通过background-position这个属性,选择开始显示这张图片的坐标位置,如果承载这个小图标的标签空间不够,那么超出这个标签的图片则不会显示,原理图如下:

这就是用background-position来显示小图标的妙用

转载请注明原文地址: https://www.6miu.com/read-4050352.html

最新回复(0)