opacity (ie alpha or transparency) is a color parameters that can be set in CSS in two ways:
This example demonstrate the usage of the opacity_property
.opacity-prop {
opacity: 0.3;
}
<h1>The image with the opacity property</h1>
<img src="/_media/web/css/surfer-in-the-see-200h.png" class="opacity-prop" />
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
.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;
}
<h1>The background image with the rgba opacity</h1>
<div class="opacity-rgba"></div>
To see how you style SVG with opacity, check the SVG image opacity article
opacity is a CSS property that sets the transparency of an element and its descendants.
This is a post processing operation that blends the rendering of the whole box and its descendant elements (therefore setting an opacity on a descendant will not work).
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]
You can also set the alpha value (ie opacity value) in any of color function that accepts it such as rgba
This technic does not apply to descendant elements and is therefore side-effect free.
Example, setting an opacity of 0.5 via a background property
background-color: rgba(255, 255, 255, 0.5);
background-image: linear-gradient(to right, rgba(255,255,255, 0.5) 0 100%),url('background-image.png')