CSS element transparency
Transparency of the image
To create a transparency effect in CSS, use the opacity
property.
The IE8 browser and its earlier versions support the alternative property
filter: alpha(opacity = x)
, where x
can take a value from 0 to 100, the smaller the value, the more transparent the element will be.
All other browsers support the standard property: opacity
, which can take a value from 0.0 to 1.0, the smaller the value, the more transparent the element will be:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> <style> .myClass { float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*for IE8 and earlier versions*/ } </style> </head> <body> <img src="flower.png" class="myClass"> <img src="flower.png"> </body> </html>Try it »
Hover transparency
Pseudo-class :hover
allows you to change the appearance of the elements when you hover the mouse over them. We'll take this opportunity to make the image lose its transparency when hovering:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> <style> img { float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*for IE8 and earlier versions*/ } img:hover { opacity: 1.0; filter: alpha(opacity=100); } </style> </head> <body> <img src="flower.png"> <img src="circle.png"> </body> </html>Try it »
Transparent background
There are two possible ways to make an element transparent: the opacity
property described above, and specifying the background color in the RGBA
format.
Perhaps you are already familiar with the color representation model in RGB
format. RGB
(Red, Green, Blue) is a color system that determines the hue by mixing red, green and blue colors. For example, you can use any of the following declarations to set a yellow color for text:
color: rgb(255,255,0); color: rgb(100%,100%,0);
The colors specified with RGB will differ from the hexadecimal values that we used before, so that you can use the alpha transparency channel. This means that through the background of an element with alpha transparency you will see what is below it.
The RGBA color declaration is similar in syntax to the standard RGB
rules. However, among other things, we need to declare the value as RGBA
(instead of RGB
) and set an additional decimal value of the transparency after the color value in the range from 0.0 (full transparency) to 1 (full opacity).
color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);
The difference between the opacity
property and the RGBA
is that the opacity
property applies transparency to the entire element, that is, the entire content of the element becomes transparent. And RGBA
allows you to set transparency to individual parts of an element (for example, text or background only):
body { background-color: red; } .prim1 { width: 420px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=70); /*for IE8 and earlier versions*/ text-align: center; } .prim2 { width: 420px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center; }Try it »
RGBA
values are not supported in the IE8 browser and earlier versions. To declare a fallback color for older browsers that do not support alpha-channel color values, you must first specify it to the RGBA
value:
background: rgb(255,255,0); background: rgba(255,255,0,0.5);