Have you seen CSS text-based image mosaics?

Seeing the picture on the cover, is it like a work of art? When I saw this picture for the first time, I was quite shocked. I couldn't wait to study how the source code was implemented. In the end, what was even more surprising was that only pure CSS was needed. It can be realized, and the realization process will be explained next.

Pre-knowledge points

To achieve this effect, you need to understand 2 pre-CSS knowledge points, the contrast and mix-blend-mode filter attributes in the filter---2901b5d56dddae7f947cf712ad673f80---property.

filter: contrast

filter attributes are believed to have been touched, such as the common blur() function is used for Gaussian blurred pictures. In addition to this, there are many other functions available, as shown in the following table:

Filter	describe
blur(px)	Apply Gaussian Blur to an image
brightness(%)	Apply a linear multiplier to the input image to make it appear more or less bright
contrast(%)	Adjust the contrast of an image
drop-shadow()	Set a shadow effect on the image
grayscale(%)	Convert image to grayscale
hue-rotate(deg)	Apply hue rotation to an image
invert(%)	Invert the input image
opacity(%)	Transparency of the converted image
saturate(%)	Convert image saturation
sepia(%)	Convert image to sepia
url()	Get a URI to an SVG filter that can be embedded in an external XML file

The main one used today is contrast to adjust the contrast of the image. As shown in the figure below, the picture on the right is the effect of adding filter: contrast(50%) .

Browser compatibility is as follows:

mix-blend-mode

mix-blend-mode This CSS property is used to "blend" the content of an element with the background of this element and the elements below it. The effect of setting a different mix-blend-mode value is as follows:

The specific meaning is explained as follows:

• multiply After mixing, the color will usually deepen, and it is mostly used in the mixing of white background images and other elements, as well as the merging of color textures.
• After the screen is mixed, the color will be reduced, which is very suitable for achieving neon lighting effects, suitable for mixing black background materials and other elements, and is very practical.
• When the color value is dark, overlay adopts an algorithm similar to "multiply bottom", and when the color value is bright, it adopts an algorithm similar to "color filter". This blending mode is more suitable for realizing text watermark effect.
• darken Indicates which color is dark and which color is used. In web development, it is very useful to color graphics or text.
• lighten Which color is light, it will appear as which color. In web development, it is very practical to color graphics or text.
• color-dodge color dodge blending mode can be used to protect the highlights of the base map, and is suitable for dealing with photos of people in high light.
• color-burn color deepening blending mode can be used to protect the shadows of the base map, and is suitable for dealing with photos such as deep and mysterious places. By mixing with specific colors, you can create a deeper artistic conception.
• The effect of hard-light is a strong light, and the final blending effect is like a dazzling spotlight shining over, showing that the brighter parts of the image are brighter, and the darker parts are darker. Mostly used in image performance processing.
• The effect of soft-light is soft light. The final mixed effect is like a diffuse light source. The performance is similar to hard-light, but the performance is not as strong. This blending mode is often used when colorizing an image.
• difference is the difference effect, which can realize the color inversion effect.
• The effect of exclusion is to exclude, and the final blending effect is similar to the difference mode, the difference is that the contrast of exclusion is lower.

The four blending modes to be introduced next are all color-based blending modes, which are not commonly used in web development, and are more commonly used in the field of traditional image performance processing.

• hue indicates tonal mixing, the final effect is that the mixed color uses the brightness and saturation of the underlying element, and the hue of the upper element.
• saturation Indicates saturation mixing, the mixed color retains the brightness and hue of the base image, and uses the saturation of the top image.
• color Indicates color mixing, the mixed color retains the brightness of the base image, and uses the hue and saturation of the top image.
• luminosity indicates brightness mixing, the mixed color retains the hue and saturation of the base image, and uses the brightness of the top image, which is the opposite of the color mode.

Browser compatibility is as follows:

code development

The main effect of today's main image is to use the filter filter in the attribute contrast and mix-blend-mode in the attribute multiply .

In order to achieve the effect and be able to read the text at the same time, set the comparison picture of the picture filter: contrast(60%) . Then set the absolute positioning of the entire text above the picture, and set mix-blend-mode: multiply to achieve the effect shown in the picture. The core code is as follows:

 <div>
  <img src="https://xxx.jpeg">
  <p>
  ***
  文本内容
  ***
  </p>
</div>

CSS code:

 div {
  position: relative; 
  overflow: hidden;
}
img {
  width: 100%;
  filter: contrast(60%);
}
p {
  line-height: 1;
  font-size: 1.76vw;
  color: #fff;
  background: #000;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

Can you guess which star is the following image after processing without looking at the source code?

at last

Today I only used one attribute of filter and mix-blend-mode , there are still many functions waiting for you to discover, interested students can try to use it, the world of CSS is waiting for you Come and discover~ If you find it useful after reading it, remember to like it before leaving. If you save it, you may use it someday~

Focus on front-end development, share dry goods related to front-end technology, public account: Nancheng Front-end (ID: nanchengfe)

refer to

• mix-blend-mode
• filter
• Introduction to CSS3 mix-blend-mode