CSS - Opacity (Property and image alpha)


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


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;
  • 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.

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]

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

Documentation / Reference

Powered by ComboStrap