Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to make text background pictures in CSS3. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Method 1. Use CSS3 attribute mix-blend-mode:lighten; to realize

It can be easily achieved by using mix-blend-mode. We only need to construct black text, white text div, overlay pictures, and then use mix-blend-mode. The simple principles are as follows:

The core code is as follows:

IMAGE.pic {position: relative; width:100%; height:100%; background: url ($img); background-repeat: no-repeat; background-size: cover;}. Text {position: absolute; width:100%; height:100%; color: # 000; mix-blend-mode: lighten; background-color: # fff;} method II,-webkit-background-clip:text

The use of this attribute means that if the text in the block is cropped outward, the background of the text is the background of the block, and all areas outside the text will be clipped.

Image.pic2 {width: 500px; height: 500px; margin: 40px auto; background: url ("1.jpg") no-repeat center center; background-size: cover; font-size: 120px; font-weight: bold; text-align: center; line-height: 500px; / * very important * /-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

Cons: browsers that only support the webkit kernel have poor compatibility.

This is the end of the article on "how to make a text background picture in CSS3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.