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

认识CSS的background（五）

本帖最后由 马黑黑 于 2024-3-12 12:30 编辑 <br /><br /><style>
.ma { font: normal 18px/24px snas-serif; }
.ma p { margin: 10px 0; }
#mydiv1 {
        margin: 20px auto 0;
        padding: 16px;
        box-sizing: border-box;
        width: 600px;
        height: 360px;
        border: 1px solid gray;
        background: lightblue url('https://638183.freep.cn/638183/web/svg/4yecc.svg') no-repeat center/100px;
}
@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; }
}
#btnwrap { margin: 20px auto 0; width: fit-content; }
#btnwrap > button { width: 100px; color: black; margin: 4px; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>

<div class="ma">
<p>接下来我们将深入理解 background-position 属性。我们已经知道，background-position 用来定义背景图像的位置，缺省值定义在宿主元素的左上角，XY坐标点是 {0,0}。设置背景图像的位置，一般需要XY坐标一同设置，以确保精准定位。但这不意味着不能用单数值设置 background-position 属性，当使用单数值时，比如设为 left 或 20%，浏览器会认为这是X坐标点，Y坐标则自动设为 center，也就是说，单数值的 background-position 属性值指向X方向，Y方向使用 center 作为默认值，而不是缺省 background-position 时的 0 这个值。以下是我编写的一个设置背景图片位置的示范，点击相应按钮，会令背景图像按照按钮的字面意设置背景图像的位置：</p>
<div id="mydiv1">元素尺寸: 600 * 360<br>初始 background-position: center</div>
<div id="btnwrap">
        <button type="button" value="center">center</button>
        <button type="button" value="top">top</button>
        <button type="button" value="right">right</button>
        <button type="button" value="bottom">bottom</button>
        <button type="button" value="center right">center right</button><br>
        <button type="button" value="left">left</button>
        <button type="button" value="20%">20%</button>
        <button type="button" value="20% 20%">20% 20%</button>
        <button type="button" value="100% 100%">100% 100%</button>
        <button type="button" value="550px 310px">550px 310px</button>
</div>
<p>background-position 是一个属性，绝大多数的CSS属性都可以拿来做动画。让我们试试看：利用 background-position 的关键字属性值，即 left、top、right、bottom 和 center 做一个CSS关键帧动画，<button id="btnPlay" type="button" value="play">点击这里观看效果</button>。</p>
<p>大家可能对这组关键帧动画感兴趣，那就来看看CSS代码，以加深对 background-position 的关键字属性值的认识：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tGreen">/* 元素调用关键帧动画 */</span></cl-cd>
<cl-cd data-idx="2">&nbsp; &nbsp; <span class="tBlue">animation:</span> bgmove 10s linear infinite alternate;</cl-cd>
<cl-cd data-idx="3">&nbsp;</cl-cd>
<cl-cd data-idx="4"><span class="tGreen">/* 背景位置关键帧动画 */</span></cl-cd>
<cl-cd data-idx="5">@keyframes bgmove {</cl-cd>
<cl-cd data-idx="6">&nbsp; &nbsp; 0% { <span class="tBlue">background-position:</span> center; }</cl-cd>
<cl-cd data-idx="7">&nbsp; &nbsp; 20% { <span class="tBlue">background-position:</span> top; }</cl-cd>
<cl-cd data-idx="8">&nbsp; &nbsp; 40% { <span class="tBlue">background-position:</span> right; }</cl-cd>
<cl-cd data-idx="9">&nbsp; &nbsp; 60% { <span class="tBlue">background-position:</span> bottom; }</cl-cd>
<cl-cd data-idx="10">&nbsp; &nbsp; 80% { <span class="tBlue">background-position:</span> left; }</cl-cd>
<cl-cd data-idx="11">&nbsp; &nbsp; 100% { <span class="tBlue">background-position:</span> top; }</cl-cd>
<cl-cd data-idx="12">}</cl-cd>
</div>
<p>本节就先讲这些，background-position 还有一些内容值得继续探讨，敬请期待。</p>
</div>

<script>
(function() {
        let lastBtn = 0;
        let btns = document.querySelectorAll('#btnwrap > button');
        btns.style.color = 'red';
        btns.forEach((btn,key) => {
                btn.onclick = () => {
                        mydiv1.style.backgroundPosition = btn.value;
                        btns.style.color = 'unset';
                        lastBtn = key;
                        btns.style.color = 'red';
                };
        });
        btnPlay.onclick = () => {
                if(btnPlay.value === 'play') {
                        btnwrap.style.display = 'none';
                        mydiv1.style.animation = 'bgmove 10s linear infinite alternate';
                        btnPlay.value = 'shut';
                        btnPlay.textContent = '点击这里停止动画';
                } else {
                        btnwrap.style.display = 'block';
                        mydiv1.style.animation = '';
                        btnPlay.value = 'play';
                        btnPlay.textContent = '点击这里观看效果';
                }
        };
})();
</script>

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

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

马黑黑 发表于 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

有做贴就用到。。{:4_173:}
谢谢黑老师{:4_190:}

马黑黑 发表于 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，然后，图片本身往右、往下的部分会全部呈现，呈现的尺寸依据是元素的宽高。

红影 发表于 2024-3-12 20:22

这个讲解好，能直接看到各种效果。550px 310px那个设置最有趣，好像只剩一个叶瓣了呢{:4_173:}

红影 发表于 2024-3-12 20:28

红影 发表于 2024-3-12 20:22
这个讲解好，能直接看到各种效果。550px 310px那个设置最有趣，好像只剩一个叶瓣了呢

这个也说明了当等于元素的宽高值时，图片为什么就看不到了的情形吧。
记得你在前面的帖子里讲过的。100% 100%时在右下角，而直接使用元素的宽高值却导致图片看不到。

红影 发表于 2024-3-12 20:30

这个有自己的特点，其他的设置一个值时，默认xy值相同，而这个会当做是x值，y直接居中了。

红影 发表于 2024-3-12 20:30

学习了，黑黑辛苦了{:4_187:}

马黑黑 发表于 2024-3-12 22:39

红影 发表于 2024-3-12 20:22
这个讲解好，能直接看到各种效果。550px 310px那个设置最有趣，好像只剩一个叶瓣了呢

也就是，有一半在里面，一般在外面，分析一下元素尺寸和background-position位置设置

马黑黑 发表于 2024-3-12 22:40

红影 发表于 2024-3-12 20:28
这个也说明了当等于元素的宽高值时，图片为什么就看不到了的情形吧。
记得你在前面的帖子里讲过的。100% ...

本讲的演示有 100% 100%

马黑黑 发表于 2024-3-12 22:40

红影 发表于 2024-3-12 20:30
这个有自己的特点，其他的设置一个值时，默认xy值相同，而这个会当做是x值，y直接居中了。

这是它的特点

红影 发表于 2024-3-13 10:30

马黑黑 发表于 2024-3-12 22:39
也就是，有一半在里面，一般在外面，分析一下元素尺寸和background-position位置设置

这个特别好，做帖子时也可以考虑留一半的效果。既满足技术讲解，也启发了做帖思路{:4_187:}

红影 发表于 2024-3-13 10:31

马黑黑 发表于 2024-3-12 22:40
本讲的演示有 100% 100%

是的，可以用来比较和理解了。

红影 发表于 2024-3-13 10:31

马黑黑 发表于 2024-3-12 22:40
这是它的特点

嗯嗯，这个必须记住呢{:4_205:}

马黑黑 发表于 2024-3-13 12:14

红影 发表于 2024-3-13 10:31
嗯嗯，这个必须记住呢

好

马黑黑 发表于 2024-3-13 12:14

红影 发表于 2024-3-13 10:31
是的，可以用来比较和理解了。

嗯嗯

马黑黑 发表于 2024-3-13 12:15

红影 发表于 2024-3-13 10:30
这个特别好，做帖子时也可以考虑留一半的效果。既满足技术讲解，也启发了做帖思路

都可以尝试一下
页: [1] 2 3
查看完整版本: 认识CSS的background（五）