认识CSS的background（六）
本帖最后由 马黑黑 于 2024-3-13 11:54 编辑 <br /><br /><style>.ma { font: normal 20px/24px sans-serif; }
.ma p { margin: 12px 0; }
.ma mark { background: lightblue; padding: 0 6px; }
#mybox { margin: 20px auto; padding: 16px; width: 600px; height: 300px; font-size: 20px; line-height: 30px; color: navy; border: 6px dashed rgba(0,0,0,.5); background: rgba(100,100,0,.5) url('https://638183.freep.cn/638183/small/bg-sm.png') no-repeat bottom right / 84px 84px; background-origin: content-box;}
#btnwrap { margin: 20px auto 0; width: fit-content; }
#btnwrap > button { margin: 0 6px; color: black; }
.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: thin solid silver; 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; }
.iMid { text-align: center; }
</style>
<div class="ma">
<p>本节继续讨论 <mark>background-position</mark> 属性。如下演示，background-position我们设置为 bottom right，等同于 100% 100%，但是，背景图片并没有紧贴元素的右边和下边，这和我们在前面的章节中所得到的印象不一样。</p>
<div id="mybox">本元素内边距设定 padding: 16px;<br>本元素边框设定 border: 6px dashed rgba(0,0,0,.5);<br>本元素的背景图像设定 background-position: bottom right</div>
<div id="btnwrap">
<span class="tRed">设置 background-origin 属性：</span>
<button type="button" value="padding-box" title="覆盖padding区域">padding-box</button>
<button type="button" value="border-box" title="覆盖border区域">border-box</button>
<button type="button" value="content-box" title="覆盖内容区域">content-box</button>
</div>
<p>为什么会这样？原来，元素的CSS样式设定中定义了另外一个 background-* 属性：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue"><mark>background-origin</mark>:</span> content-box;</cl-cd>
<cl-cd data-idx="2"> </cl-cd>
<div class="tGreen"><cl-cd data-idx="3">/* 说明</cl-cd>
<cl-cd data-idx="4"> background-origin 属性规定 background-position 属性相对于什么位置来定位，值有：</cl-cd>
<cl-cd data-idx="5"> ① <mark>padding-box</mark> 默认，背景图像相对于内边距框来定位(覆盖padding，贴边框)</cl-cd>
<cl-cd data-idx="6"> ② <mark>border-box</mark> 背景图像相对于边框盒来定位（覆盖border，全部覆盖）</cl-cd>
<cl-cd data-idx="7"> ③ <mark>content-box</mark> 背景图像相对于内容框来定位（覆盖内容，贴内边距内缘）</cl-cd>
<cl-cd data-idx="8">*/</cl-cd></div>
</div>
<p>本节开始给出的示范，使用了 ③ <mark>content-box</mark> 的设定，背景图像相对于内容定位。内容其实说的是内容区域，具体指元素中没有进行特殊定位的子元素（比如图片）和子节点（比如文本）的自然呈现的区域，在这个区域里，子内容按代码流的出现次序进行自然排列，它们会受到宿主元素的内边距设定的影响，如果内边距即<mark>padding</mark>大于 0px 则前述子元素和文本不会靠边，上下左右都会与元素的边境拉开<mark>padding</mark>所设定的内边距距离。</p>
<p>不论内边距设定与否，我们都可以通过 background-origin 来设置 background-position 的定位模式：靠边（覆盖border边框）、挨边（覆盖内边距区域）、和内容对齐（覆盖content区域）。这里需要注意，一是元素的几个概念要理清：边框（border）、内边距（padding）、内容区（content）；二是弄清边框、内边距和内容区的边界问题：边框在元素的<mark>内边缘</mark>、紧挨着内边距。内边距是空白的区域，上下左右都存在，它用来隔开元素边框与元素子内容。内边距再往里就是内容区了，内容区就是元素子内容呈现的地方。可以点击上面的三个按钮查看不同的 border-origin 设置效果并理解元素的这几个概念和它们之间的边界问题。</p>
<p>一般而言，设置元素的背景图像，总是希望背景图片能够覆盖边框以外的全部区域，所幸的是，不设置 background-origin 属性就可以达到要求，这是我们过去一直不介绍这个属性的原因。如上代码介绍里说明的，覆盖内边距是 background-origin 的默认值，这就能让背景图像覆盖到除边框（border）外的所有元素区域，显然正是我们所需要的。当然了，很多应用场景可能会对背景图像的覆盖区域有不同的需求，学习和掌握 background-origin 属性还是非常有必要的。</p>
<p>下一讲我们将学习多背景图像的设置，敬请期待。</p>
</div>
<script>
(function() {
let lastBtn = 2;
const btns = document.querySelectorAll('#btnwrap > button');
btns.style.color = 'red';
btns.forEach((btn,key) => {
btn.onclick = () => {
mybox.style.backgroundOrigin = btn.value;
btns.style.color = 'black';
btn.style.color = 'red';
lastBtn = key;
};
});
})();
</script> 本节的核心内容：
background-origin 属性对 background-position 属性的影响 background-origin 从来不知道的一个属性，这个学习太好了{:4_199:} 原来有那么多东西在起着作用，而我们都不知道。其实我们一直在使用着它们的默认属性呢。{:4_187:} 这个演示的效果设计十分好，能清晰地展示background-origin各种设置下的效果呢{:4_199:} 红影 发表于 2024-3-13 09:37
background-origin 从来不知道的一个属性，这个学习太好了
这个新朋友认识一下也好 红影 发表于 2024-3-13 09:40
这个演示的效果设计十分好，能清晰地展示background-origin各种设置下的效果呢
专门设计的
红影 发表于 2024-3-13 09:38
原来有那么多东西在起着作用，而我们都不知道。其实我们一直在使用着它们的默认属性呢。
是的，使用默认属性挺好 前两天消寒弄个图图加字，还好好的，今天竟然总弄不起来了，不是没图，要不没音，再不然没播放器{:4_198:} 继续啃西瓜{:4_189:}把皮留给冬小雨{:4_170:} 樵歌 发表于 2024-3-13 14:50
前两天消寒弄个图图加字，还好好的，今天竟然总弄不起来了，不是没图，要不没音，再不然没播放器
这个你需要找红影解决 樵歌 发表于 2024-3-13 14:50
继续啃西瓜把皮留给冬小雨
欢迎欢迎 马黑黑 发表于 2024-3-13 11:55
这个新朋友认识一下也好
嗯嗯，又可以和新朋友混个脸熟了{:4_173:} 马黑黑 发表于 2024-3-13 11:55
专门设计的
黑黑厉害{:4_199:} 马黑黑 发表于 2024-3-13 11:56
是的，使用默认属性挺好
其他属性也必须认识的呢{:4_187:} 红影 发表于 2024-3-13 19:18
其他属性也必须认识的呢
最好是 红影 发表于 2024-3-13 19:17
嗯嗯，又可以和新朋友混个脸熟了
朋友多了路好走 红影 发表于 2024-3-13 19:18
黑黑厉害
厉害不厉害我不知道，举个栗子而已 马黑黑 发表于 2024-3-13 16:16
这个你需要找红影解决
错过一个符号 樵歌 发表于 2024-3-13 21:13
错过一个符号
符号很重要