Example code for using CSS cross-fade() to achieve a semi-transparent background image effect

1. Requirements description

For a certain element, you want the background background-image image to be semi-transparent, but other content in the element, such as text, icons, etc., are still opaque.

If it is a solid color background or a CSS gradient background, it is easy to handle. Just use rgba or hsla color values.

However, if it is url() background image, it seems that there is nothing we can do.

If it is an inline <img> image, it is easy to handle. Whether it is a filter, mask or opacity setting, we can achieve our effect. However, this is a background image, and all the methods mentioned above will affect the normal display of the text.

I guess many people would think of using the ::before / ::after pseudo-elements, for example:

.box {
   position: relative;
   z-index: 0;
}
.box::before {
   content: '';
   position: absolute;
   left: 0; right: 0; top: 0; bottom: 0;
   background: url(xxx.jpg) no-repeat center / contain;
   z-index: -1;
   opacity: .5;
}

The real-time effect is as follows (if there is no effect, please visit the original author Zhang Xinxu):

by-zhangxinxu

However, this method is too verbose and costly (it creates a lot of stacking contexts and the size needs to be adjusted), so it cannot be used on a large scale.

Is there any good way to implement it?

Try using cross-fade() image function.

2. cross-fade() makes the background image semi-transparent

cross-fade() function allows two images to be blended semi-transparently.

For example:

<div class="cross-fade-image"></div>

.cross-fade-image {
    width: 300px; height: 300px;
    background: no-repeat center / contain;
    background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%);
    background-image: cross-fade(url(1.jpg), url(2.jpg), 50%);   
}

The effect will be as shown in the figure below.

Image 2.jpg is rendered mixed with image 1.jpg at 50% transparency.

The above example uses the traditional syntax of cross-fade() function, which is as follows:

<dfn id="ltimage-combination">
<image-combination>
</dfn> = cross-fade( <image>, <image>, <percentage> )

Here <percentage> refers to the transparency, which will only change the transparency of the second image. The final effect is that the first image is completely opaque and the second image is semi-transparent.

Regarding the percentage value in cross-fade() image function, it only changes the transparency of the next image. I made a demo page for testing a long time ago. You can click here: CSS3 cross-fade attribute transparency object test

The screenshots are as follows:

Although the original intention of cross-fade() function is to superimpose multiple images semi-transparently, such scenarios are rarely encountered in actual development. Therefore, cross-fade() is more suitable for controlling the semi-transparent effect of a single background image.

The implementation principle is very simple. Use a transparent image for the first image and a target image for the second image.

For example:

A background image is too bright in dark mode. I want to adjust the brightness of the background image. cross-fade() function is implemented by the following CSS code (the CSS for width and height settings is omitted):

.dark {
    /* Fallback, IE and Firefox browsers*/
    background-image: url(2.jpg);
    --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
    /* The latest version of Safari no longer requires a private prefix*/
    background-image: cross-fade(var(--transparent), url(2.jpg), 40%);
    /* If you use custom properties, the -webkit- statement needs to be placed below the statement without the private prefix*/
    background-image: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%);

    background-size: cover;
}

The effect is as follows:

Isn’t it simple? Isn’t it much more reliable than pseudo-element implementation? The corresponding demo can be found here.

cross-fade() is essentially an <image> image data type, and is a property of url() image, gradient image, and image-set() function, and can be used in border-image , mask-image and other attributes.

Therefore, using cross-fade() function to replace url() function to achieve the semi-transparent effect of the background image is the lowest cost and best method.

3. Excellent mobile compatibility

cross-fade() function has been supported by webkit browsers for a long time, including iOS 5 and Android 4.4. However, it requires setting a private prefix, as shown in the following figure:

Therefore, you can use it with confidence on mobile devices. As for PC, you can use it with confidence if you don’t need to consider the IE browser. Even if you need to consider IE, there is nothing wrong with it. The only difference is that the background image is still completely opaque, and the visual experience is slightly lower.

There are no such things as useless CSS properties in this world, it’s just that you haven’t encountered the right scenario; just like those of you who are still single, you just haven’t met the right one yet.

In addition, the cross-fade() function has a new syntax after being added to the CSS specification, which is more flexible and powerful, but currently no browser supports it, so this article does not introduce it.

This concludes this article about using CSS cross-fade() to achieve background image translucent effect with sample code. For more information on CSS cross-fade() background image translucent effect, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. We hope that you will support 123WORDPRESS.COM in the future!