15 Kinds of CSS blending modes to create stunning effects on images

Reprint Address: http://yusi123.com/3170.html

If you have used a wide range of image editing applications (such as Adobe photoshop,pixelmator,gimp, etc.), you may be familiar with the blending mode. Mixed mode, as implied in the name, refers to the various patterns used to incorporate the upper image into the underlying image. Depending on the pattern you choose, you will see different fusion effects.

The blending mode takes two pixels laid on top of each other and unfolds in a different way, such as a darker color blending mode that renders only two pixels darker. Blending mode can produce some stunning effects as you extend to the entire image.

The CSS blending mode provides a way to specify how layers and layers interact and mix. Originally belongs to the picture editing application software domain Some effect realization, now also may be possible through the CSS blending mode to implement in the Web.

Of course, a friend who is very interested in the front end can also look at these: 30 Color schemes very wonderful website design works to enjoy 2014 front-end development very practical 15 HTML&CSS framework to share 40 humanized solutions for building a good user interface Share 30 Amazing parallax scrolling (Parallax scrolling) effects web browser support

As it is now, browsers support Cssbackground-blend-mode properties are still being perfected. Earlier versions of browsers are not currently supported, but Caniuse.com reports that the latest versions of Chrome,firefox and opera are well supported, using Safari fastest.

Currently, chromium based browsers are most supported for CSS blending modes (both Background-blend-mode and Mix-blend-mode). In order to make opera support, you need to open opera:flags in the opera Address bar, and then turn on the Enable experimental Web Platform features. For Chrome, you need to open the same project via Chrome://flags.

Firefox now does not support the isolation attribute, but you can first enjoy the other properties, you need to open the About:config, and then search for the properties and open. Safari and IE browsers still do not support these features so far.

Unless your browser improves on its support, it's best to not use CSS blending patterns as an important part of your design, but as an enhanced effect in a given design. For demonstration purposes, however, you might want to open the link content in a browser that supports both the Background-blend-mode and Mix-blend-mode properties. the working principle of Background-blend-mode

The Background-blend-mode property specifies how the source element should mix its own color with its background picture and background color. If there is any other layer under the element (for example, a section element that uses a blue background color), it will not mix its own color with that element. It only mixes its own color with the background images and colors specified in the CSS.

As shown in the following example:

Background-image:url (images/sample.png); background-color:red; background-blend-mode:multiply;

If you are using multiple background images, you can apply multiple background image blending modes for each of them, for example:

Background-image:url (images/sample1.png), url (images/sample2.png); Background-color:blue; Background-blend-mode:screen, overlay;

In the example above, the Sample1.png picture will apply the screen blending mode, and Sample2.png will apply the overlay mode. How to use the Background-blend-mode property

CSS3 's candidate recommendations also have some mixed-mode options, but the most useful is the background blending mode: Background-blend-mode. This property allows us to mix two images, or an image and a background color.

The example below is as follows:

<div class= "Blend" ></div>

This is the base class:

. blend {width:780px;         height:539px; Background: #3db6b8 URL ("lighthouse.jpg") no-repeat Center Center; }

Now we're going to add a blending mode.

To do this, we're going to add another class to our div, such as "multiply":

<div class= "Blend multiply" ></div>

Then we'll create a second style rule:

. blend.multiply {Background-blend-mode:multiply}

If you want to see all the code here you can download the source file. Replace the inside of the picture path you can see the display effect. Multiply Overlay mode (Multiply)

Multiply, as its name implies, is based on mixed-color pixels, so darker colors appear. Black overlay result is black, white overlay image unchanged.

background-blend-mode:multiply;

Screen mode/color filter (screens)

In contrast to the positive stacked mode, the effect of the composite layer is to show a higher level of gray in the two layer, while the lower gray level does not appear (that is, light-colored, dark does not appear), resulting in a brighter image.

Background-blend-mode:screen;

overlay Mode (Overlay)

Overlay is a complex blending mode. The actual effect depends on the base color: the lighter light becomes lighter and the darker color becomes darker.

The overlay blending mode has a lighter effect on the pixel color in screen, as well as the pixel color in multiply. What mode to use, depending on the underlying color, after the synthesis of some areas of the image darkened some areas to lighten

Background-blend-mode:overlay;

Dimming mode (darken)

The effect of this pattern depends on the depth (color) between the source and background colors, that is, the RGB values (that is, the color brightness values in the RGB channel) are compared between the colors of the two-layer pixel, and the lower values are then combined into the blended color.

Background-blend-mode:darken;

lighten mode (lighten)

This pattern, contrary to darken, depends on a lighter color (color) between the source and background colors. After the RGB values of two pixels are compared, the high value becomes the blended color, so the total color gray level increases, resulting in a brighter effect.

Background-blend-mode:lighten;

color Dodge (Color-dodge)

The Color-dodge mode highlights the background color, resulting in a sharp contrast to the image. It reduces the contrast by reducing the light and light colors to reflect the blend color.

Background-blend-mode:color-dodge