CSS background

I'm porting a UI-based game from Unity to Cordova. In Unity, I was tinting predominately white images with various colors to reuse assets. The rough CSS equivalent seems to be using the [mostly standard] background-blend-mode property set to multiply and have the image in the background with the desired tint color as the bg color.

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

The problem is that it doesn't preserve the opacity of the image, namely the transparent parts become the tint color. The spec says something about blending from the top down so I thought it might relate to blending with the bg color, but it doesn't work if I layer a solid color (as a gradient) on top of the image either.

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

Reversing the order of the background images or changing the blend mode to normal, multiply or multiply, normal doesn't work either. Any suggestions on how to do this correctly using CSS?

EDIT: As the answer mentions, the alpha aspect can be achieved using the mask property. I used a combination of the two techniques to get what I needed:

.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/87076.html

上一篇: Java：更好的颜色选择算法

下一篇: CSS背景