Blending mode of css, text intelligent adaptation background, text intelligent adaptation background image, text hollow effect, difference mode, color filter mode, difference, screen, overlay, mix, blend, mode

Article directory

  • Text intelligently adapts to the background (difference mode)
  • Text intelligently adapts to the background image (difference mode)
  • Text Hollow Effect (Screen Mode)
  • Text and background overlay (overlay mode)
  • Mix mode mix-blend-mode function table
  • Mixed-mode taxonomy

Text intelligently adapts to the background (difference mode)

<div class="main">
<span>Text intelligently adapts to the background</span>
</div>

.main {<!-- -->
    width: 860px;
    height: 680px;
    text-align: center;
    line-height: 680px;
    background: linear-gradient(45deg, #ff0000 0, #ff0000 50%, #0000ff 50%);
}

.main span {<!-- -->
    color: #00ff00;
    font-size: 68px;
    mix-blend-mode: difference;
}

difference

Text intelligently adapts to the background image (difference mode)

<div class="main">
<span>Text intelligently adapts to the background image</span>
</div>

.main {<!-- -->
width: 860px;
height: 680px;
text-align: center;
line-height: 680px;
background-image: url('../image/04_100.jpg');
}

.main span {<!-- -->
color: #ffffff;
font-size: 68px;
mix-blend-mode: difference;
}

img_difference

Text hollow effect (screen mode)

<div class="parent">
<span class="child">Text hollow effect</span>
</div>

.parent {<!-- -->
    background-image: url("../image/68_1000100.jpg");
    background-size: 100% 100%;
    width: 860px;
    height: 680px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parent .child {<!-- -->
    padding: 6px;
    box-sizing: border-box;
    font-weight: 900;
    font-size: 68px;
    color: #000000;
    background-color: #ffffff;
    border-radius: 6px;
    mix-blend-mode: screen;
}

screen

Text and background overlay (overlay mode)

<div class="parent">
<div class="child">overlay mode</div>
</div>

.parent {<!-- -->
    background-image: url("../image/57_111001.jpg");
    background-size: 100% 100%;
    width: 860px;
    height: 680px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parent .child {<!-- -->
    font-weight: 900;
    font-size: 68px;
    color: rgba(255, 255, 255, 1);
    mix-blend-mode: overlay;
}

overlay

mix-blend-mode function table

Photoshop layer CSS blend mode Chinese name Function description
normal normal Normal mode Pixels of the mixed color will show through the color used
multiply multiply Multiply Mode In Multiply mode, look at the color information in each channel and compound the Base Color with the Blend Color.
screen screen Color Mode “Screen” mode and “Multiply ” mode is just the opposite, it combines the image’s “base” color with the “blend” color to produce a third color that is lighter than both colors
overlay overlay Overlay mode The “overlay” mode mixes the image’s “base color” color with the “blend color” color to produce an intermediate color.
darken darken Dark Mode In Darken mode, view the The color information in each channel, and select the darker color of the “base color” or “blend color” as the “result color”.
lighten lighten Lighten Mode In Lighten mode, view the The color information in each channel, and select the lighter color of the “base color” or “mixed color” as the “result color”.
color-dodge color-dodge Color Dodge Mode In “Color Dodge ” mode, looks at the color information in each channel and brightens the base color to reflect the blend color by reducing the contrast. No change occurs when mixed with black.
color-burn color-burn Color Burn Mode In “Color Burn” mode , looks at the color information in each channel, and darkens the base color to reflect the blend color by increasing the contrast, which would have no change if mixed with white.
hard-light hard-light hard light mode The “hard light” mode will Produces a strong lighting effect. If the pixels of the Blend Color and Base Color are lighter, the Result Color will be brighter; if the Pixels of the Blend Color are darker than the pixels of the Base Color, the Result Color will be lighter dark.
soft-light soft-light Soft Light Mode Soft Light” mode will produce A soft lighting effect. If the “mixed color” color is lighter than the pixels of the “base color”, the “result color” will be brighter; if the “mixed color” color is darker than the pixels of the “base color”, Then the “result color” color will be darker, increasing the brightness contrast of the image.
difference difference Difference mode In “Difference” mode, view the The color information in each channel, the “difference” mode is to subtract the brightness value of the “mixed color” color from the brightness value of the “base color” color in the image, and if the result is negative, take a positive value to produce an inversion effect.
exclusion exclusion Exclusion Mode The “Exclusion” mode is similar to the “Difference” mode , but with high contrast and low saturation. Colors are softer and brighter than those obtained with the Difference mode.
hue hue Hue mode The “hue” mode only uses the “mixed color” color The hue value is colored, while the saturation and lightness values remain unchanged.
saturation saturation Saturation Mode The “Saturation” mode works in the same way as the ” Hue mode is similar in that it only colors with the saturation value of the Blend color, leaving the hue and lightness values unchanged.
color color Color Mode The “Color” mode enables the use of the “Mixed Color” color The saturation and hue values of the color are colored simultaneously, leaving the brightness value of the “base” color unchanged. The “Color” mode can be regarded as the combined effect of the “Saturation” mode and the “Hue” mode.
luminosity luminosity Luminosity Mode The “luminosity” mode enables the use of the “blend color” color The brightness value of the color is colored, while the saturation and hue values of the “base color” color are kept unchanged. In fact, the “result color” is created by using the “hue” and “saturation” of the “base color” and the lightness of the “blend color”.

Category table for mixed mode

Category Name Mixed Mode Name Description
Basic blending mode normal Uses layer transparency and opacity to control blending with underlying layers
Darken mixing mode darken, multiply, color-burn Color reduction mode, filter out the highlight color in the image, so as to darken the image
Brighten blend mode screen,lighten,color-dodge Add color mode, filter out the dark color in the image, so as to achieve brighter image
Fusion blending mode overlay, soft-light, hard-light Used for different degrees of fusion of upper and lower layers
Variation blending mode difference,exclusion,hard-light Used to make various variations of layer blending
Color Overlay Mixing Mode hue,saturation,color,luminosity According to the basic properties of the layer such as hue and saturation, complete the layer Fusion