时间戳

首页 > 解决方案 > CSS中的分层蒙版

css - CSS中的分层蒙版

问题描述

我试图弄清楚CSS中是否有可能的图层蒙版。基本上我有一个表示某种阶段的 SVG。这使用 mask-image 显示为掩码，并且具有黑色背景色。类似于以下内容：

mask-image: url(image.svg);
background-color: #000;
...

根据某些相关状态，我需要通过在其上叠加另一个 svg 来引起对该蒙面 svg 的注意，例如感叹号。这将具有另一种颜色，例如红色，但可能会根据情况而改变。

下面显示了一个粗略的示例，其中我有一个带有一些文本的按钮。正方形是一个 svg，仅在某些状态（状态 A）存在时才会出现，在这种情况下，会向 div 添加一个类。正方形内的圆圈是相关状态，仅在正方形为状态 A 为真时出现，加上一些附加状态。所以在一个 Less/BEM 结构中，这个额外的状态将被实现为一个修饰符，如下所示：

&__state {
  mask-image: url(state.svg);
  background-color: #000;
  ...

  &--inner-state {
    mask-image: url(inner-state.svg);
    background-color: red;
    ...
  }
}

在此处输入图像描述

该按钮对svgs一无所知，因为我根据状态动态添加div和上面的CSS。

这在 CSS 中很容易实现吗？如前所述，我使用的是带有 BEM 结构的 Less，但我不一定需要与这些结构相关的答案。我对这个概念更感兴趣。

如果需要，请随时询问更多信息，我将不胜感激！

标签： csssvglessmaskbem

解决方案

如果我正确理解了您的问题...您可以像这样简单地将额外的覆盖 svg 放置为<img>或内联<svg>：

.masked{
  width: 100px;
  position: relative;
}
.masked img{
  width: 100%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='50' fill='#fff'></circle></svg>") top left / cover;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='50' fill='#fff'></circle></svg>") top left / cover;
}

.masked svg{
  width: 100%;
  position: absolute;
  top: 0;
  opacity: 0;
}

.masked:hover svg{
  opacity: 1;
}
<div class="masked">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" />
  <svg viewBox="0 0 100 100">
    <rect x="25" y="25" width="50" height="50" fill="red"></rect>
  </svg>
</div>

推荐阅读