CSS Function - cross-fade()

The cross-fade() function in CSS is used to blend two or more images or colors at a specified transparency.

Syntax

cross-fade(url(image1.png) <percentage>, url(image2.png) <percentage>);

The function cross-fade() takes the parameters in the form of a list of images with a percentage value, which defines how much of each specified image is retained, when it is blended with other images. The percentage value must be in range of 0 to 100, must contain a % symbol and not mentioned in quotes.

  • Percentage is nothing but an opacity value for each image, where 0% determines that image is fully transparent and 100% means a complete opaque image.

  • When a percentage value is not specified, all the other percentage values are summed and subtracted from 100%. When

  • When the result is more than 0%, the result is then divided equally between all the images, that do not specify percentage values.

  • When two images need to be blended, just one of them needs to have a percentage value, as the other will be blended in it accordingly.

  • When no percentage values are specified for any image, then both the images will be rendered with 50% opacity.

  • When both images have percentage values such that the sum of two is more than 100%, then both get rendered at their respective percentage values only.

  • When three images are specified and no percentage value is passed, all the three will be rendered with 33.33% opacity.

Accessibility concerns: No special information is provided to the assistive technologies about the background images and hence nothing will be announced in the screen readers as well about the background images. In case such background image is important and signifies any imformation to the user, will get missed by the assistive technologies. It is advised to descrivbe such information semantically in the document.

Note: It is a must to prefix the function with appropriate prefixes based on the browser, for example while using Chrome, use the prefix -webkit.

CSS cross-fade() - Using two images with URL

Following example demonstrates the use of cross-fade() function, where two images are listed and one percentage value, which decides the blending of two images.

<html>
<head>
<style>
   #box {
      width: 700px;
      height: 500px;
   
      /* cross-fade() where 45% of the second image and balance 55% of first image will be blended */
      background-image: -webkit-cross-fade(
         url("images/border.png"), url("images/tree.jpg"), 45%);
      }
</style>
</head>
<body>
   <h1>Cross-fade</h1>
   <div id="box"></div>
</body>
</html>

CSS cross-fade() - Using linear-gradient()

Following example demonstrates the use of cross-fade() function, where two images, created using linear-gradient() are listed and one percentage value, which decides the blending of two images.

<html>
<head>
<style>
   #box {
      width: 700px;
      height: 500px;
   
      /* cross-fade() where 85% of the second image and balance 15% of first image will be blended */
      background-image: -webkit-cross-fade(
         linear-gradient(red, yellow), linear-gradient(white, lightblue), 85%);
      }
</style>
</head>
<body>
   <h1>Cross-fade</h1>
   <div id="box"></div>
</body>
</html>
Advertisements