CSS3 new Features: mix-blend-mode:multiply

Note: Mix has the meaning of mixing; Blend also has a mixed meaning.

Multiply is multiplied, the meaning of multiplication, also has a positive superposition of meaning (the background color and the foreground hue multiply),

One of the interview questions I often ask is: "How do you keep abreast of new technologies and APIs in the front-end field?" Most of what I've heard are standard answers: "Tech blogs" and "RSS Feeds", and I rarely hear the answer "pay attention to Daniel Twitter," And I find it strange Because I learn loads on Twitter, especially when I'm learning CSS, one or two lines of code can handle the problem gracefully.

I've heard that mix-blend-mode this CSS property is very force-giving. and the actual effect is wonderful, more perfect than imagined:

In essence, the use of mix-blend-mode:multiply in the picture; Style, all white parts are converted to translucent PNG.

The original Demo: https://davidwalsh.name/demo/mix-blend-mode.php

Editable Online Code Demo: Http://codepen.io/wesbos/pen/QNONJa

This CSS is simply not perfect! Thanks to Wes Bos, I know this beautiful CSS feature! The Twitter address of the great God is: Https://twitter.com/wesbos

Translator: Anchor Http://blog.csdn.net/renfufei

Translation time: May 2, 2016

Original date: April 13, 2016

Original link: Https://davidwalsh.name/mix-blend-mode