CSS蒙版图像后元素的边框丢失

如何解决CSS蒙版图像后元素的边框丢失

我已经将svg作为 mask-image 应用于某些div。这样做之后，他们的边界就消失了。

.icon {
  padding:5px;
  border:5px solid #000;
  width: 150px;
  height: 150px;
  display: inline-block;
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask-size: contain;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

<div class="wrap">
  <div class="icon red"></div>
  <div class="icon blue"></div>
</div>

知道为什么会这样吗？任何解决方案都应仅基于CSS。

解决方法

为什么的答案很简单：蒙版适用于所有元素，包括其边界。即使您有box-shadow

，元素的任何部分也会受到遮罩的影响

为避免这种情况，请使用其他元素创建边框，或考虑使用多个遮罩以保持边框可见：

.icon {
  padding:5px;
  border:5px solid #000;
  width: 150px;
  height: 150px;
  display: inline-block;
  -webkit-mask: 
      linear-gradient(#fff 0 0) top   /100% 5px,linear-gradient(#fff 0 0) bottom/100% 5px,linear-gradient(#fff 0 0) left  /5px 100%,linear-gradient(#fff 0 0) right /5px 100%,url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) center/contain;
   -webkit-mask-repeat:no-repeat;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

<div class="wrap">
  <div class="icon red"></div>
  <div class="icon blue"></div>
</div>

我添加了4个渐变。每一个都将覆盖边框以使其可见。

我正在使用额外的div包装器在包含蒙版的div周围创建边框。

我已在代码中添加注释以解释我的更改。

.maskborder{
  width: 150px;
  height: 150px;
  border:5px solid #000;
  position: relative;
  float: left;
}

.maskborder.two {
  margin-left: 10px; /* Change this to suit how much gap you want between first and second box */
}

.icon {
  padding:5px;
  border:5px solid #000;
  width: 150px;
  height: 150px;
  display: inline-block;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask-size: contain;
  -webkit-mask-size: contain;
  position: absolute;
  transform: translate(-10px,-10px) /* To offset the 5px border width so that the icons can be centred correctly in middle */
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

<div class="wrap">
  <div class="maskborder">
    <div class="icon red"></div>
  </div>
  <div class="maskborder two">
     <div class="icon blue"></div>
  </div>
</div>

因此，在进行了一段时间的搜索后，我最终确定了mask的border属性，看来您需要使用另一个svg作为能够形成边框的正方形。

我将以下属性添加到.icon：

-webkit-mask-box-image: url(https://www.flaticon.com/svg/static/icons/svg/33/33879.svg) 10 repeat;
mask-border: url(https://www.flaticon.com/svg/static/icons/svg/33/33879.svg) 10 repeat;

我实际上在这里找到了诀窍：https://css-tricks.com/clipping-masking-css/#border-masks，并根据您的情况进行了调整。

我想您可以轻松创建一个带有合适边框的svg正方形，并将其设置在其中。

演示

.icon {
  padding:5px;
  border:5px solid #000;
  width: 150px;
  height: 150px;
  display: inline-block;
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask-size: contain;
  -webkit-mask-box-image: url(https://www.flaticon.com/svg/static/icons/svg/33/33879.svg) 10 repeat;
  mask-border: url(https://www.flaticon.com/svg/static/icons/svg/33/33879.svg) 10 repeat;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

<div class="wrap">
  <div class="icon red"></div>
  <div class="icon blue"></div>
</div>