Which property enables blending of layered background images?

• A. color
• B. background-blend-mode
• C. mix-blend-mode
• D. background-color

Answer: (B)

Blending layered background images is controlled by a CSS property that defines how the different background layers interact with one another. By using this property, you specify blend modes (like multiply, screen, overlay, darken, lighten, etc.) that determine how each layer combines with the layer beneath it. That means you can take a gradient and an image and blend them to create richer visuals, rather than just stacking them.

For example:

• background-image: linear-gradient(to right, red, transparent 50%), url(image.jpg);

• background-blend-mode: multiply;

Color or background-color are just solid fills and don’t blend between background layers. mix-blend-mode blends the entire element with the page content behind it, not the internal layers of the element.