爱淘FE

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

640

background-clip 组合拳的一个小玩法

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

screenshot

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

  1. 半透明特性,若有重合区域会透明度叠加重影。
  2. 两元素的高度定位总无法匹配一致(viewport缩放导致)。

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

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

最终元素布局审查如图

screenshot

发表评论


back up ↑