CSS Opacity (Opacity)

The opacity CSS property specifies the opacity of an element. The opacity property specifies the transparency of an element. In other words, the opacity property specifies the degree to which the background behind an element is covered.

Cross-browser opacity

Now, opacity is a CSS3Part of the specification, but it has been around for a long time. However, older browsers have different ways to specify opacity or transparency.

Firefox, Safari, Chrome, Opera, and IE9of CSS opacity

This is the latest syntax for CSS opacity in all current browsers.

p {
　　　　opacity: 0.7;
}

The following style rule will make the paragraph element70% opaque (or30% transparent).

The value range of the opacity property is 0.0 to1.0. Set opacity to1; makes the element completely opaque (i.e., 0% transparent), while opacity: 0; makes the element completely transparent (i.e.,100% transparent).

Internet Explorer 8and lower versions of CSS transparency implementation methods

Internet Explorer 8and earlier versions support the Microsoft-only property 'alpha filter' to specify the transparency of the element.

p {
　　　　filter: alpha(opacity=50);
　　　　zoom:　1;　　/*　Fix for IE7　*/
}

CSS transparency compatible with all browsers

By combining the above two steps, you will getall browsersofTransparency code.

p {
　　　　opacity: 0.5;　　/*　Opacity for Modern Browsers　*/
　　　　filter: alpha(opacity=50);　　/*　Opacity for IE8　and lower　*/
　　　　zoom:　1;　　/*　Fix for IE7　*/
}

CSS image transparency

You can also use CSS Opacity to create transparent images.

The three images in the following figure are all from the same source image. The only difference between them is their transparency.

Change image transparency on mouse hover

The following examples demonstrate common uses of CSS image transparency, where the transparency of the image changes when the user moves the mouse pointer over it.

—move the mouse pointer over the image to see the effect.

Text in the transparent box

When opacity is used on an element, not only will the element's background be transparent, but all its child elements will also become transparent. If the opacity value increases, it will make the text inside the transparent element difficult to read.

To prevent this, you can use transparent PNG images, or place the text block outside the transparent box, and then use negativemarginsorCSS positioningvisibly push it into the interior.

div {
　　　　float: left;
　　　　opacity: 0.7;
　　　　border:　1px solid #949781;
}
p {
　　　　float: left;
　　　　position: relative;
　　　　margin-left:　-400px;
}

CSS transparency using RGBA

In addition to RGB, CSS3It also introduces a new method RGBA to specify a color, which includes alpha transparency as part of the color value. RGBA stands for Red, Blue, Green, Alpha.

RGBA declaration is a very simple method to set color transparency.

div {
　　　　background: rgba(200,　54,　54, 0.5);
}
p {
　　　　color: rgba(200,　54,　54, 0.25);
}

The first three numbers represent the RGB values in the color, that is, red (0-255)), green (0-255)), blue (0-255)), the fourth number represents the range between 0 to1between the alpha transparency values (0 makes the color completely transparent, and values1to make it completely opaque).

An important feature to note about RGBA opacity is-The ability to specify the opacity of a single color. Using RGBA, we can make the text color of the element transparent while keeping the background complete.

— or ignore the text color, only change the transparency of the background.

You will see that RGBA can easily specify a single color rather than the opacity of the entire element. However, it is always recommended to define a backup color for browsers that do not support RGBA colors.

RGBA Declaration Backup Color

All browsers do not support RGBA colors. However, you can provide other choices for browsers that do not support it, such as plain color or transparent PNG images.

p {
　　　　/*　Fallback for web browsers that do not39;t support RGBA　*/
　　　　background: rgb(0, 0, 0);
　　　　/*　RGBa with 0.5　opacity　*/
　　　　background: rgba(0, 0, 0, 0.5);
}