认识CSS的background（十）

马黑黑 · 发表于 2024-3-20 13:38

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-3-20 19:46 编辑

先来做个小游戏：以下演示，div盒子用了一张尺寸和它一样的图片做背景，盒子下方有一个按钮，点击按钮看看发生了什么。

不要方，没什么可怕的，刘谦见了也只不过是吓一跳而已，然后含泪离开现场。嗯嗯，我们的魔术显然刘谦做不出来，迄今为止，刘谦的魔术貌似没有拿过人体做道具，他不应该伤心离去，这可是我们关于 background 属性的最后一课了。现在我们来见证奇迹的原理，先看代码：

<style>

#myDiv {

margin: 30px auto;

width: 600px;

height: 400px;

background: url('123.jpg') no-repeat center/cover;

position: relative;

--left: 260px;

}

#myDiv::before {

position: absolute;

content: '';

top: 0;

left: var(--left);

width: 160px;

height: 160px;

border-radius: 50%;

background: url('123.jpg') no-repeat -260px 0;

transition: 2s;

}

</style>

再看解释：

这是一个 600*400 的 div 盒子，它有一个背景图片（第6行代码），它的伪元素 ::before 也有一个相同的背景图片（第18行代码）。主元素的背景图片真实还原底图的样貌，因为图片的大小也是 600*400，因此第6行代码的 center/cover 作用不大，可以不要；伪元素本质上是主元素的子元素，它浮动于宿主元素之上，而我们这个 ::before 伪元素尺寸为 160*160（代码第15、16行），我们要截取美女的头像做它的背景图像，所以要对底图进行定位。对背景图片进行定位，使用的是 background-position 属性，上面代码我们是用了 background 这个简写属性，no-repeat 之后的数据 -260px 0 就是 background-position 的数据，意思是，伪元素 ::before 的背景图片水平方向往左移动 260 个像素，垂直方向往上移动 0 个像素（0px 可以省略像素单位）。

很多应用场景会需要从一整张图片中截取一部分作为元素的背景图像，比如工具条按钮，那么，上面的 ::before 伪元素对背景图片的处理方法就能大显身手，我们要掌握的技巧是如何调遣 background-position 属性，例如代码中，我们设置 background-position 为 -260px 0，其含义上面已做解释，而具体从图片的什么地方开始截取图片片段则依据我们对背景图像样貌的需求，本例我们要的是美女的头部和肩膀，我们需要PS或任意作图软件乃至像素尺来测量一下图片，获取我们需要的图像部分的起始点xy两个方向的数据，上面的演示例子是从图片左边260px处、上边0px处截取，所得数据用到 background-position 时，大于零的数据均使用负数表示图片往左边移动背景图片。被截取的宽度和高度则为元素的宽高尺寸，这个无需测量，仅需要保证被截取的图像片段是完好的就行。必须注意，截取图片的一部分做背景图片的这种操作就不要再去设置 background-size 属性，设定好图片的“裁剪”位置之后其他的一切依赖于图片自身，就是说，从“裁剪”点开始，往右、往下的图片内容取真实图片的若干单位，以元素的宽高尺寸为标准，图片不做任何伸缩；否则，如果设置 background-size，所得结果可能将不是自己所预期的。

大家可能对移动头像的特效感兴趣，那就发个福利吧。实现代码如下：