How to use cross-fade () to realize the translucency effect of background image in CSS

This article is about how to use cross-fade () to achieve translucency of background images in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The cross-fade () function allows two images to be mixed translucently. For example

HTML

Css

.box {

Width: 600px

Height: 450px

Background-image:-webkit-cross-fade (url (girl.jpg), url (1.jpg), 50%)

Background-image: cross-fade (url (girl.jpg), url (1.jpg), 50%)

}

Attention, friends, at present, Google needs to add a prefix-webkit- to support this function.

Let's take a look at the specific implementation:

The cross-fade () function takes a list of images and defines, as a percentage, the opacity retained when each image is mixed with other images. The percentage value must be encoded without quotation marks, must contain the "%" symbol, and its value must be between 0% and 100%. The percentage is treated as the opacity value of each image, which means that a value of 0% means that the image is completely transparent, while a value of 100% makes the image completely opaque.

The following format is to mix the 1.png image with 75% transparency and the 2.png image with 25% transparency.

Cross-fade (url (1.png) 75%, url (2.png) 25%)

The above form can also be written as

Cross-fade (url (1.png) 75%, url (2.png))

If no percentage is declared, both images will be 50% opaque, and the fade-in rendering is an even merge of the two images. The following is the same effect.

Cross-fade (url (1.png) 50%, url (2.png) 50%)

Cross-fade (url (1.png), url (2.png))

If no percentage is declared and contains three images, the opacity of each image is 33.33%. The following is the same effect.

Cross-fade (url (1.png), url (2.png), url (3.png))

Cross-fade (url (1.png) 33.33%, url (2.png) 33.33%, url (3.png) 33.33%)

Thank you for reading! This is the end of the article on "how to use cross-fade () in CSS to achieve the translucent effect of background images". 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, you can share it out for more people to see!