请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-3-18 08:16 编辑
本节主要讲 background-clip 属性。clip 有修剪之意，background-clip 指裁剪元素的背景，作用于背景颜色和背景图像，其实就是设定元素的背景延伸到何处，共有四个属性值可供选用：① border-box（默认，背景延伸到边框外缘），② padding-box（修剪到内边距外缘，背景延伸到内边距与边框内缘的衔接处），③ content-box（修剪到内容区域外缘，背景延伸到内容区与内边距内缘衔接处），④ text（按文本样貌修剪背景，背景将“延伸到”文本之上，即只在内容区域的文本笔画上面呈现背景）。下面的演示，演示div盒子设置了元素的边框、内边距、较大的字号以及背景色和可选的背景渐变图像，从而能更好地体现出四个属性值被设定后 background-clip 属性的具体表现：
padding: 16px;
border: 10px dashed purple;
background-color: lightblue;
background-image: var(--img);
||
前三个属性都是标准属性，除了已经废弃的IE外，所有现代浏览器均完好支持。第四个属性，text，背景颜色或图像被剪裁成文字背景，是个冷门属性，最新版的Chrome、Edge、Firefox均已支持，但不是最新版本的不好说，补救方法是在 background-clip 前加一个前缀-webkit-即可。具体代码举例如下：
/* background-clip属性值共四个 ：border-box, padding-box, content-box, text
当 background-clip 属性值为 text 时，为兼容起见，下面两行代码均需要
*/
background-clip: text;
-webkit-background-clip: text;
/* JS 表达 background-clip 方法
假如要操作的盒子 id="myBox"
*/
myBox.style.backgroundClip = 'text';
myBox.style.webkitGroundClip = 'text';
/* 或者使用 cssText 按 CSS 方式来写*/
myBox.style.cssText += `
background-clip: text;
-webkit-background-clip: text;
`;
要使用 text 属性，应将元素的前景色 color 设置为透明，可以使用如下方法的任意一种：
/* 使用颜色关键词 */
color: transparent;
/* 使用 rgba */
color: rgba(0,0,0,0);
/* 使用 hsla */
color: hsla(0,100%,100%,0);
同时，最好不要设置 text-shadow 即文本阴影属性，因为这个属性的颜色在渲染前景色时会直接取代前景色的 transparent 透明值，实在非设置不可时，建议使用透明度较大的 rgba 或 hsla 颜色值以减少阴影颜色对前景色的干扰。
| 
发表于 2024-3-18 08:11
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-18 18:00
好滴
发表于 2024-3-19 20:02