Using CSS Opacity to Create Transparent Images

CSS:
#img1 { opacity: 1 }
#img2 { opacity: 0.6 }

HTML:

Using CSS Opacity for Backgrounds
You can assign opacity to backgrounds in two ways. In the first way, you specify a value for the opacity property as you saw in the examples we worked on so far.

div {
  opacity: 0.5;
}
In the second way, you specify the alpha channel value in the RGBA (Red, Green, Blue, Alpha) declaration of the background color like the following:

div {
  background: rgba(0, 0, 0, 0.5);
}

By changing the R, G and B values, you can have a transparent background of any color. This is also how you can have non-transparent child elements inside a transparent element. Normally, the opacity value of the parent will descend to its child elements; however, by using a transparent background, you can leave the child elements to be opaque while keeping their container transparent.
Transparent Borders with CSS
If you are making use of large borders in your design and you need to apply opacity to them, you can assign an alpha channel value to the border color as shown in the following example:

.image-box {
  border: 15px solid rgba(0, 0, 0, 0.5);
}

Leave a Reply