CSS - Opacity (Property and image alpha)

1 - About

opacity (ie alpha or transparency) is a color parameters that can be set in CSS in two ways:

2 - Example

2.1 - 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

2.2 - 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

2.3 - Svg Opacity

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

3 - Set

3.1 - Opacity Property

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]

3.2 - 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

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

  • 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')

4 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap