Question

我想要一个从两侧淡出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;

唯一的问题是它在中间不可见。我该如何解决这个问题？

Answer 1

试试这个。

以下是demo CODEPEN

的codepen

此外，我附上了代码，如果您有任何疑问请告诉我。

<强> HTML

<div class="div">
    <span>Example Program</span>
  </div>

<强> CSS

.div {
  box-shadow: 0 16px 0px 0px white, 0 -16px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
  -webkit-mask-position: 0 0, 100% 0;
-webkit-mask-size: 16px 40px, 16px 40px;
width: 30%;
height: 40px;
margin: 50px;
background: red;
}

span {
  display: block;
background: rgb(255, 255, 255);
height: 40px;
}

Answer 2

一个选项是添加覆盖整个表面的第三个渐变（实际上是均匀的白色），并使用-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浏览器。

Answer 3

这就是诀窍。非常hacky解决方案。

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

Solution demo

用css动态屏蔽

3 个答案: