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 »
Note: 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);
Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen