CSS背景

我正在将Unity中的基于UI的游戏移植到Cordova。 在Unity中，我主要着色各种颜色的白色图像以重复使用资产。 粗略的CSS等效似乎是使用[主要是标准] background-blend-mode属性集来multiply背景中的图像，并将所需的色调颜色作为bg颜色。

.tinted {
  background-image: url('theimg.png');
  background-size: 100% 100%;
  background-color: #0f0;
  background-blend-mode: multiply;
}

问题是它不保留图像的不透明度，即透明部分变成浅色。 该规范说明了一些关于从上到下混合的内容，所以我认为它可能与bg颜色混合有关，但是如果我在图像顶部将纯色（作为渐变）图层化，它也不起作用。

.tinted2 {
  background-image: url('theimg.png'), linear-gradient(to bottom, #0f0, #0f0);
  background-size: 100% 100%;
  background-blend-mode: multiply;
}

颠倒背景图像的顺序或将混合模式更改为normal, multiply或multiply, normal也不起作用。 有关如何正确使用CSS做到这一点的建议？

编辑：正如答案所述，alpha方面可以使用mask属性来实现。 我使用了两种技术的组合来获得我需要的东西：

.tintedMasked {
  background-image: url('theimg.png');
  background-size: 100% 100%;
  mask-image: url('theimg.png');
  mask-size: 100% 100%;
  background-color: #0f0;
  background-blend-mode: multiply;
}

---

如果我正确理解你想要做什么，那么背景混合就不是这样，而是掩饰。

div {
    height: 200px;
    background-image:linear-gradient(SlateBlue, Tomato);
  -webkit-mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
  mask: url(https://cdn.pixabay.com/photo/2016/12/28/19/37/denied-1936877_960_720.png) top left no-repeat / contain;
}
}

<div></div>
<h1>No stairway??</h1>

链接地址: http://www.djcxy.com/p/87075.html

上一篇: CSS background

下一篇: Apply an SVG filter to a div's background