认识CSS的background（五）

马黑黑 · 发表于 2024-3-12 12:26

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

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

x

本帖最后由马黑黑于 2024-3-12 12:30 编辑

接下来我们将深入理解 background-position 属性。我们已经知道，background-position 用来定义背景图像的位置，缺省值定义在宿主元素的左上角，XY坐标点是 {0,0}。设置背景图像的位置，一般需要XY坐标一同设置，以确保精准定位。但这不意味着不能用单数值设置 background-position 属性，当使用单数值时，比如设为 left 或 20%，浏览器会认为这是X坐标点，Y坐标则自动设为 center，也就是说，单数值的 background-position 属性值指向X方向，Y方向使用 center 作为默认值，而不是缺省 background-position 时的 0 这个值。以下是我编写的一个设置背景图片位置的示范，点击相应按钮，会令背景图像按照按钮的字面意设置背景图像的位置：

元素尺寸: 600 * 360
初始 background-position: center

background-position 是一个属性，绝大多数的CSS属性都可以拿来做动画。让我们试试看：利用 background-position 的关键字属性值，即 left、top、right、bottom 和 center 做一个CSS关键帧动画，。

大家可能对这组关键帧动画感兴趣，那就来看看CSS代码，以加深对 background-position 的关键字属性值的认识：

/* 元素调用关键帧动画 */

animation: bgmove 10s linear infinite alternate;

/* 背景位置关键帧动画 */

@keyframes bgmove {

0% { background-position: center; }

20% { background-position: top; }

40% { background-position: right; }

60% { background-position: bottom; }

80% { background-position: left; }

100% { background-position: top; }

}

本节就先讲这些，background-position 还有一些内容值得继续探讨，敬请期待。

南无月 · 发表于 2024-3-12 18:10

位置十分重要，也常用。。老师这样直观演示加讲解，真是太好了。。

马黑黑 · 发表于 2024-3-12 18:24

南无月发表于 2024-3-12 18:10
位置十分重要，也常用。。老师这样直观演示加讲解，真是太好了。。

帖子里background-position一直只用到 center

南无月 · 发表于 2024-3-12 19:17

马黑黑发表于 2024-3-12 18:24
帖子里background-position一直只用到 center

有做贴就用到。。

谢谢黑老师

马黑黑 · 发表于 2024-3-12 19:43

南无月发表于 2024-3-12 19:17
有做贴就用到。。
谢谢黑老师

你看你的绝大多数的帖子，background 属性设置里，后面是不是 center/cover ？

center 就是 background-position，/ 后面的是 background-size（背景图像大小）

南无月 · 发表于 2024-3-12 19:54

马黑黑发表于 2024-3-12 19:43
你看你的绝大多数的帖子，background 属性设置里，后面是不是 center/cover ？

center 就是 backgroun ...

这个是的，每贴都有。
background: url('https://638183.freep.cn/638183/t24/1/skymirror.jpg') -270px -298px;
这个天镜里的非背景图片错位，后来发现是跟前面的left: 270px; top: 298px;一起实现只留中间镜子的。

马黑黑 · 发表于 2024-3-12 20:00

南无月发表于 2024-3-12 19:54
这个是的，每贴都有。
background: url('https://638183.freep.cn/638183/t24/1/skymirror.jpg') -270px ...

当只使用 background-size，没有设置 background-size，那么，就是依据原图像。你上面的background简写属性，是定义了 background-position 为 -270px -298px，它们的位置位于主元素的左上方{-270, -298}处，就是说，背景图片左拉 270px、上拉298px，然后，图片本身往右、往下的部分会全部呈现，呈现的尺寸依据是元素的宽高。