css3 - 看设计识技术【CSS】

Question

上图中，背景是图片，但是上面覆盖了一层黑色（？），这是怎么实现的？或者说这种东西叫什么，我去看看。

Answer 1

1. 1px image mask
2. Transparent element mask (bgc#000; op.3 / rbga)
3. css3
   a. -webkit-filter (image brightness processing)
   b. -webkit-mask (transparent layer)

---

If I remember correctly, all of the above methods can be achieved. Compatible low-level browsers generally use the first two.

Answer 2

The transparency setting must be set through the CSS property opacity.

An obvious idea is to "cover" a black block and set the overlay to translucent black...

But if you reverse your thinking, you can think of: setting the image to be translucent, and then setting the container of the image to a solid black background, is not only simpler in structure, but also can degrade smoothly when transparency fails.