认识CSS的background（九）
本帖最后由 马黑黑 于 2024-3-18 08:16 编辑 <br /><br /><style>.pa { font: normal 18px / 26px sans-serif; }
.pa p { margin: 16px 0; }
.pa mark { padding: 2px 6px; background: lightblue; }
#bgClipBox { margin: 20px auto; padding: 16px; width: 600px; height: 260px; font: normal 24px / 36px sans-serif; border: 10px dashed purple; background-color: lightblue; background-image: var(--img); background-clip: border-box; position: relative; --img: none; }
.tMid { text-align: center; }
.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 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="pa">
<p>本节主要讲 <span class="tRed">background-clip</span> 属性。clip 有修剪之意，background-clip 指裁剪元素的背景，作用于背景颜色和背景图像，其实就是设定元素的背景延伸到何处，共有四个属性值可供选用：① <mark>border-box</mark>（默认，背景延伸到边框外缘），② <mark>padding-box</mark>（修剪到内边距外缘，背景延伸到内边距与边框内缘的衔接处），③ <mark>content-box</mark>（修剪到内容区域外缘，背景延伸到内容区与内边距内缘衔接处），④ <mark>text</mark>（按文本样貌修剪背景，背景将“延伸到”文本之上，即只在内容区域的文本笔画上面呈现背景）。下面的演示，演示div盒子设置了元素的边框、内边距、较大的字号以及背景色和可选的背景渐变图像，从而能更好地体现出四个属性值被设定后 background-clip 属性的具体表现：</p>
<div id="bgClipBox">padding: 16px;<br>border: 10px dashed purple;<br>background-color: lightblue;<br>background-image: var(--img);</div>
<p class="tMid">
<button class="btnSet" type="button" value="border-box">border-box</button>
<button class="btnSet" type="button" value="padding-box">padding-box</button>
<button class="btnSet" type="button" value="content-box">content-box</button>
<button class="btnSet" type="button" value="text">text</button> ||
<button id="gradient" type="button" value="1">使用渐变背景</button>
</p>
<p>前三个属性都是标准属性，除了已经废弃的IE外，所有现代浏览器均完好支持。第四个属性，text，背景颜色或图像被剪裁成文字背景，是个冷门属性，最新版的Chrome、Edge、Firefox均已支持，但不是最新版本的不好说，补救方法是在 background-clip 前加一个前缀<mark>-webkit-</mark>即可。具体代码举例如下：</p>
<div class='mum'>
<div class="tGreen"><cl-cd data-idx="1">/* background-clip属性值共四个 ：border-box, padding-box, content-box, text</cl-cd>
<cl-cd data-idx="2"> 当 background-clip 属性值为 text 时，为兼容起见，下面两行代码均需要</cl-cd>
<cl-cd data-idx="3">*/</cl-cd></div>
<cl-cd data-idx="4"><span class="tBlue">background-clip:</span> text;</cl-cd>
<cl-cd data-idx="5"><span class="tBlue">-webkit-background-clip:</span> text;</cl-cd>
<cl-cd data-idx="6"> </cl-cd>
<div class="tGreen"><cl-cd data-idx="7">/* JS 表达 background-clip 方法</cl-cd>
<cl-cd data-idx="8"> 假如要操作的盒子 <span class="tRed">id</span>=<span class="tMagenta">"myBox"</span></cl-cd>
<cl-cd data-idx="9">*/</cl-cd></div>
<cl-cd data-idx="10">myBox.style.backgroundClip = <span class="tMagenta">'text'</span>;</cl-cd>
<cl-cd data-idx="11">myBox.style.webkitGroundClip = <span class="tMagenta">'text'</span>;</cl-cd>
<cl-cd data-idx="12"><span class="tGreen">/* 或者使用 cssText 按 CSS 方式来写*/</span></cl-cd>
<cl-cd data-idx="13">myBox.style.cssText += `</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">background-clip:</span> text;</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">-webkit-background-clip:</span> text;</cl-cd>
<cl-cd data-idx="16">`;</cl-cd>
</div>
<p>要使用 text 属性，应将元素的前景色 color 设置为透明，可以使用如下方法的任意一种：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tGreen">/* 使用颜色关键词 */</span></cl-cd>
<cl-cd data-idx="2"><span class="tBlue">color:</span> transparent;</cl-cd>
<cl-cd data-idx="3"><span class="tGreen">/* 使用 rgba */</span></cl-cd>
<cl-cd data-idx="4"><span class="tBlue">color:</span> rgba(0,0,0,0);</cl-cd>
<cl-cd data-idx="5"><span class="tGreen">/* 使用 hsla */</span></cl-cd>
<cl-cd data-idx="6"><span class="tBlue">color:</span> hsla(0,100%,100%,0);</cl-cd>
</div>
<p>同时，最好不要设置 text-shadow 即文本阴影属性，因为这个属性的颜色在渲染前景色时会直接取代前景色的 transparent 透明值，实在非设置不可时，建议使用透明度较大的 rgba 或 hsla 颜色值以减少阴影颜色对前景色的干扰。</p>
</div>
<script>
(function() {
let lastBtn = 0;
let btnSets = document.querySelectorAll('.btnSet');
btnSets.style.color = 'red';
btnSets.forEach((btn,idx) => {
btn.onclick = () => {
let color = btn.value === 'text' ? 'transparent' : 'black';
bgClipBox.style.cssText += `color: ${color}; background-clip: ${btn.value}; -webkit-background-clip: ${btn.value}`;
btnSets.style.color = 'black';
btn.style.color = 'red';
lastBtn = idx;
}
});
gradient.onclick = () => {
let bgAr = ['unset','radial-gradient(circle,pink,lightblue,pink)'],
txAr = ['使用渐变背景','取消渐变背景'];
let idx = gradient.value;
bgClipBox.style.setProperty('--img', bgAr);
gradient.innerText = txAr;
gradient.value = idx == 1 ? 0 : 1;
};
})();
</script> 又出一成果{:4_199:} 樵歌 发表于 2024-3-18 12:20
又出一成果
这是系列教程 关于TEXT的前景色 color 设置为透明的问题，
结合老师的网站的解说，
是不是可以认为是把文字变成块透明玻璃，取消代替原来的颜色，
裁剪之后透过文字形状的玻璃就能看到背景色。。。
所以，变透明玻璃这一步必须要。。{:4_170:} 马黑黑 发表于 2024-3-18 13:21
这是系列教程
教程就是教学成果{:4_189:} 这个text特别美妙，可以弄出各种美妙的文字效果呢{:4_199:} 红影 发表于 2024-3-18 20:29
这个text特别美妙，可以弄出各种美妙的文字效果呢
lrc歌词模拟同步的花潮格式就是用的它 樵歌 发表于 2024-3-18 18:10
教程就是教学成果
那不见得了。你应该做过老师，你知道，教案不同等于教学结果，即便很优秀。 南无月 发表于 2024-3-18 18:00
关于TEXT的前景色 color 设置为透明的问题，
结合老师的网站的解说，
是不是可以认为是把文字变成块透明 ...
这个专门在站立回复过，请移玉步 马黑黑 发表于 2024-3-18 20:34
那不见得了。你应该做过老师，你知道，教案不同等于教学结果，即便很优秀。
俺们那时还没教程一说。{:4_189:} 樵歌 发表于 2024-3-18 20:44
俺们那时还没教程一说。
哦，那时候统一叫教案，你参加教案比赛还得过鼓励奖 马黑黑 发表于 2024-3-18 20:36
这个专门在站立回复过，请移玉步
{:4_181:}好滴 南无月 发表于 2024-3-18 21:01
好滴
{:4_191:} 马黑黑 发表于 2024-3-18 20:30
lrc歌词模拟同步的花潮格式就是用的它
是的，而且可以用图图做衬底的。 马黑黑 发表于 2024-3-18 20:56
哦，那时候统一叫教案，你参加教案比赛还得过鼓励奖
俺连参加的资格都木有，站在外围瞧热闹{:4_189:} 樵歌 发表于 2024-3-19 07:20
俺连参加的资格都木有，站在外围瞧热闹
评委呀？ 红影 发表于 2024-3-18 23:06
是的，而且可以用图图做衬底的。
{:4_181:} 马黑黑 发表于 2024-3-19 12:37
评委呀？
吃瓜呗 樵歌 发表于 2024-3-19 14:31
吃瓜呗
评委吃瓜，那个叫酷 这是最后一个了吗