background-clip 组合拳的一个小玩法_html/css_WEB-ITnose-html教程-PHP中文网

background-clip 组合拳的一个小玩法_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:21:32

原创

1520人浏览过

之前项目里有个半透明的tag组件如下，长度随字数自增，箭头可左可右。

开始用代码实现，分拆为【圆角矩形+圆角三角】2个元素组合实现，但总是无法完美实现，原因至少有：

半透明特性，若有重合区域会透明度叠加重影。
两元素的高度定位总无法匹配一致（viewport缩放导致）。

多次折腾后摸索出一个方法，使用小图片，组合多个 CSS3的background子属性，只用一个元素实现效果：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

  padding-right: 18px;  background-image: url(https://img.alicdn.com/tps/TB1t0O9IFXXXXb8XXXXXXXXXXXX.png), url(https://img.alicdn.com/tps/TB1hNC6IFXXXXaEXpXXXXXXXXXX.png);  background-position: right 0;  background-size: contain;  background-repeat: no-repeat, repeat-x;  background-clip: padding-box, content-box;

登录后复制

立即学习“前端免费学习笔记（深入）”；

首先利用CSS3的多重背景图特性，为一个元素插2张图（图片都很小）。
再使用 background-clip 的特性，将2张背景图片附着于元素的不同区域，这个特性类似box-sizing的设置。
1. 顺带的，这里可以结合 background-origin 理解下，两种属性的值选项范围相同，但概念有差别，所以实现的效果不同。
2. clip是裁剪，origin是起点。前者会破坏背景图完整度，后者只改变背景图出现的起点区域。具体定义可戳这里。
之后结合双重赋值的 background-position 和 background-repeat 属性，为pading和content区域的背景图片进行差异化设置。
1. 注意这里的repeat，矩形主体部分因为是repeat-x刷出的，所以代码里使用了 background-clip 而不是 background-origin ,后者在这里的效果被 background-repeat 低效。再次体现了CSS调试里常见的 交叉干扰 现象
这样就可以达成一个 单元素长度自适应Tag 。

最终元素布局审查如图

大家都在看：

在HTML中正确显示JavaScript函数结果的指南使用jQuery实现点击父元素动态切换图片并还原的教程 JavaScript教程：为动态生成的列表项添加顺序编号 Structr中HTML Select组件的数据绑定与关系管理教程响应式 blockquote 引用块尾部引号的精确对齐技巧