认识CSS的background（四）
本帖最后由 马黑黑 于 2024-3-11 18:34 编辑 <br /><br /><style>.ma { font: normal 18px/24px sans-serif; }
.ma p { margin: 12px 0; }
.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; }
#showDiv {margin: 20px auto;width: 718px;height: 363px;font-size: 20px;line-height: 30px;color: navy;box-sizing: border-box;overflow-y: auto;background: rgba(100,100,0,.5) url('https://638183.freep.cn/638183/small/bg-sm.png') scroll no-repeat 10px 10px / auto;}
.btnWrap { margin: 20px auto; width: fit-content; }
.btnWrap > button { margin: 6px; width: 120px; }
</style>
<div class="ma">
<p>本节单单讨论 background-repeat 属性。上一讲简单介绍了 background-repeat 属性，它用来定义背景图像是否重复、如何重复，这里再详细介绍它的属性值及其含义等。请看：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">background-repeat:</span> repeat; <span class="tGreen">/* xy方向都重复（缺省、默认值） */</span></cl-cd>
<cl-cd data-idx="2"><span class="tBlue">background-repeat:</span> repeat-x; <span class="tGreen">/* x方向都重复，y方向不重复 */</span></cl-cd>
<cl-cd data-idx="3"><span class="tBlue">background-repeat:</span> repeat-y; <span class="tGreen">/* y方向都重复，x方向不重复 */</span></cl-cd>
<cl-cd data-idx="4"><span class="tBlue">background-repeat:</span> no-peat; <span class="tGreen">/* xy方向都不重复 */</span></cl-cd>
<div class="tGreen"><cl-cd data-idx="5">/* ↓</cl-cd>
<cl-cd data-idx="6"> 能重复时头尾两个图像固定在元素的四个边，中间均匀分布</cl-cd>
<cl-cd data-idx="7"> 图像尺寸大于等于元素尺寸时此设置无效，大于时图片被剪裁</cl-cd>
<cl-cd data-idx="8"> */</cl-cd></div>
<cl-cd data-idx="9"><span class="tBlue">background-repeat:</span> space; <span class="tGreen">/* 等同于 space space，xy均这样设置 */</span></cl-cd>
<div class="tGreen"><cl-cd data-idx="10">/* ↓</cl-cd>
<cl-cd data-idx="11"> 图像会根据允许的空间进行伸缩，图形会变形</cl-cd>
<cl-cd data-idx="12"> 怪异属性值，不同浏览器对 round 的解析行为可能不一致</cl-cd>
<cl-cd data-idx="13">*/</cl-cd></div>
<cl-cd data-idx="14"><span class="tBlue">background-repeat:</span> round; <span class="tGreen">/* 等同于 round round，xy均这样设置 */</span></cl-cd>
</div>
<p>以上是 background-repeat 简写属性赋值举例和说明，共六个属性值。另外还有：一个继承属性值（inherit），表示继承父级元素的设置，一个取消设置（unset）属性值，一个初始设置值（initial），后两者均用于JS动态交互。针对六个属性值，我们需要注意的是，任意一个方向的图像重复设置，以及 round 属性值设置，都会从 background-position 设置或默认设置的位置开始复制，最后复制到与复制出发点相衔接（图像的右对左、下对上，但左右和上下两边的图像可能不能拼凑成完整图像，大家可以在后面的演示中观察感受）；space 属性值则会令 background-position 的设置失效，图像重复总是从最上边、最左边开始。</p>
<p>最后给出一个演示示例，示例的初始设置是背景图像定位在元素的左上角，background-position 设置为 10px 10px，可以通过点击各个按钮逐一查看不同的 background-repeat 设置是什么样的效果：</p>
<div id="showDiv"></div>
<div class="btnWrap">
<span class="tRed">设置 background-repeat 属性: </span><br><br>
<button class="btnAttr" type="button" value="repeat">repeat</button>
<button class="btnAttr" type="button" value="repeat-x">repeat-x</button>
<button class="btnAttr" type="button" value="repeat-y">repeat-y</button>
<button class="btnAttr" type="button" value="no-repeat">no-repeat</button>
<button class="btnAttr" type="button" value="space">space</button><br>
<button class="btnAttr" type="button" value="space no-repeat">space no-repeat</button>
<button class="btnAttr" type="button" value="no-repeat space">no-repeat space</button>
<button class="btnAttr" type="button" value="round">round</button>
<button class="btnAttr" type="button" value="round no-repeat">round no-repeat</button>
<button class="btnAttr" type="button" value="no-repeat round">no-repeat round</button>
</div>
</div>
<script>
(function() {
let lastBtn = 3;
let btns = document.querySelectorAll('.btnWrap > button');
btns.style.color = 'red';
btns.forEach((btn,idx) => {
btn.onclick = () => {
btns.style.color = 'unset';
lastBtn = idx;
btn.style.color = 'red';
showDiv.style.backgroundRepeat = btn.value;
}
});
})();
</script>
这里面还有这么细致的划分啊。平常只用用repeat，还有space和round呢，而且这两个的设置还有细分{:4_187:} 这样的演示真好，可以直接看到各种效果的实际样子了{:4_199:} 红影 发表于 2024-3-11 20:00
这样的演示真好，可以直接看到各种效果的实际样子了
不过我设置的图片可能不是很理想，有兴趣可以试试其他的小图片 红影 发表于 2024-3-11 19:58
这里面还有这么细致的划分啊。平常只用用repeat，还有space和round呢，而且这两个的设置还有细分
要讲究把它们较可能讲完吧 马黑黑 发表于 2024-3-11 20:06
不过我设置的图片可能不是很理想，有兴趣可以试试其他的小图片
这个圆形的就挺好，看得更明显呢。{:4_187:} 马黑黑 发表于 2024-3-11 20:06
要讲究把它们较可能讲完吧
黑黑辛苦了。这个讲解十分全面呢{:4_199:} 红影 发表于 2024-3-11 21:00
黑黑辛苦了。这个讲解十分全面呢
不一定的。个人理解能力有限 红影 发表于 2024-3-11 20:59
这个圆形的就挺好，看得更明显呢。
喜欢就好 马黑黑 发表于 2024-3-11 21:47
不一定的。个人理解能力有限
黑黑把每一个都讲得这么详细呢，很不容易{:4_190:} 马黑黑 发表于 2024-3-11 21:48
喜欢就好
如果是方的图形，还不一定看得这么清楚呢{:4_187:} background-repeat
光一个重复就有这么多效果。。。
示例第二排左边两个和右边两个，名称看上去差不多，效果也不相同。。{:4_173:} {:4_199:}很详细，老师讲得清楚 。。又是最好的教程。。。 南无月 发表于 2024-3-12 18:07
很详细，老师讲得清楚 。。又是最好的教程。。。
废话不多{:4_170:} 马黑黑 发表于 2024-3-12 18:24
废话不多
{:4_199:}简洁明了。。一等一的好 南无月 发表于 2024-3-12 19:15
简洁明了。。一等一的好
{:5_108:} 马黑黑 发表于 2024-3-12 19:44
{:4_191:}白酒来一杯吧 南无月 发表于 2024-3-12 19:55
白酒来一杯吧
谢谢，干 马黑黑 发表于 2024-3-12 20:05
谢谢，干
这么干脆啊。。不留小池不养鱼{:4_173:} 南无月 发表于 2024-3-13 17:51
这么干脆啊。。不留小池不养鱼
看看养的是什么鱼儿
页:
[1]
2