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

About

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

Example

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

Set

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





Discover More
Css - (Colors|Colours)

Color in css. A valid color is either : a name (keyword) or a numerical RGB specification. The list of colour is: Color Name numerical RGB #00ffff #000000 #0000ff #ff00ff ...
Card Puncher Data Processing
SVG - Opacity (Transparency or Alpha)

Transparency (opacity) can be applied by setting: a RGB color with alpha, or the opacity css attribute value. The stylesheet: The circle: The stylesheet: The circle:
Web Security - Clickjacking

A page that provides users with an interface to perform actions that the user might not wish to perform needs to be designed so as to avoid the possibility that users can be tricked into activating the...



Share this page:
Follow us:
Task Runner