Maybe there kinda is background-opacity?

Jake's article "Cannot cross-fade any two DOM elements currently" explores in-depth reasons why elements cannot be truly cross-fade, and this article is very exciting. While the opacity of two elements can be animate, this is not a real cross-fading effect. It turns out that Chrome/WebKit's unique CSS function -webkit-cross-fade() can achieve this effect. The MDN documentation mentions that the function is normalized, but there are differences between different implementation versions, so it's a little confusing...but it does exist:

 .el {
  background: -webkit-cross-fade(url(img1.svg), url(img2.svg), 50%);
}

I didn't even know there was this feature.

The first thing that comes to my mind is: if one of the images is a transparent blank image, will partial transparency be applied to the other image? So it can be used as an alternative to background-opacity ( background-opacity doesn't exist, but it feels like it should exist).

I did a test to see if it works:

The test results are valid! The core code is as follows:

 .el {
  background-image: -webkit-cross-fade(
    url(image.jpg),
    url(data:image/gif; base64,R0lGODlhAQABAIAAAAAAAAAAP///yH5BAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7),
    50%
  );
}

This is a Base64 encoded 1-pixel transparent GIF image.

This method does not work in Firefox, but works in other browsers. In addition, browser support can be tested directly in CSS and different methods can be used when not supported.

 @supports (background: -webkit-cross-fade(url(), url(), 50%)) {
  /* Apply this method only when supported, Firefox alternatives are outside this*/
}

The above code is already included in the demo.

The above is the detailed content of Maybe there kinda is background-opacity?. For more information, please follow other related articles on the PHP Chinese website!