Question

我将基于UI的游戏从Unity移植到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颜色混合有关，但是如果我在图像上面涂上一个纯色（作为渐变），它就不起作用。 / p>

.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正确执行此操作的任何建议吗？

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

.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;
}

Answer 1

如果我理解你正在尝试做什么，那么背景混合不是方法，而是掩盖。

＆＃13;

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;
}
}

＆＃13;

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

＆＃13;

假设您的蒙版图像是Alpha透明PNG。你也可以通过设置mask-mode: luminance;

来使用亮度掩模

CSS background-blend-mode乘以不透明度

1 个答案: