css - 使用CSS的动态 mask

我希望有一个从两侧都淡出16px的面具。

就像：16px fading in - white - 16px fading out。

我得到的是：DEMO

-webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparent, white);
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-size: 16px 40px, 16px 40px;
-webkit-mask-position: 0 0, 100% 0;
-webkit-mask-origin: padding-box, padding-box;

唯一的问题是它在中间不可见。我怎样才能解决这个问题？

最佳答案

一种选择是添加覆盖整个表面的第三个渐变（实际上将均匀地为白色），并使用-webkit-mask-composite: copy确保其他两个渐变替换侧面的部分：

  -webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparent, white), linear-gradient(to right, white, white);
  -webkit-mask-composite: copy;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-size: 16px 40px, 16px 40px, 100% 100%;
  -webkit-mask-position: 0 0, 100% 0, 0 0;
  -webkit-mask-origin: padding-box, padding-box, padding-box;

演示：http://codepen.io/anon/pen/crEyL

请注意，当然，所有这些仅适用于WebKit浏览器。

关于css - 使用CSS的动态 mask ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25420241/