CSS - How to set an opacity (on any element, background image included)

Image Opacity

This example demonstrate the usage of the opacity_property

• The CSS to set the opacity via the property

.opacity-prop {
     opacity: 0.3;
}

• The html

<h1>The image with the opacity property</h1>
<img src="/_media/web/css/surfer-in-the-see-200h.png" class="opacity-prop" />

• The result

Background image opacity

This example demonstrate the alpha parameter of the rgba function.

The color rgba(255,255,255, 0.7) is similar to the opacity_property of 0.3. ie alpha = 1 - opacity of white

• The CSS to set the opacity via a generated image by the gradient function and the rgba color definition on a background image

.opacity-rgba {
     background-image: linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%),url(/_media/web/css/surfer-in-the-see-200h.png);
     background-repeat: no-repeat;
     height:200px;
}

• The HTML

<h1>The background image with the rgba opacity</h1>
<div class="opacity-rgba"></div>

• Result

Svg Opacity

To see how you style SVG with opacity, check the SVG image opacity article

Opacity Property

opacity is a CSS property that sets the transparency of an element and its descendants.

A alpha value of 1 means no transparency whereas a value of 0 means full transparency

Value:	<alpha-value>
Initial:	1
Applies to:	all elements
Inherited:	no
Percentages:	map to the range [0,1]

Alpha parameter of the rgba function

You can also set the alpha value (ie opacity value) in any of color function that accepts it such as rgba

Example, setting an opacity of 0.5 via a background property

• color

background-color: rgba(255, 255, 255, 0.5);

• image:

background-image: linear-gradient(to right, rgba(255,255,255, 0.5) 0 100%),url('background-image.png')