close[x]


CSS

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2



learncodehere.com




CSS - Transparency / Opacity

The CSS opacity property is used to specify the transparency of an element.

The CSS transparency / opacity property specifies the clarity of the image.

CSS opacity setting is applied uniformly across the entire object.

You can also set opacity on texts, images , buttons etc.

CSS opacity value is defined less than 1.


Example : Transparency / Opacity

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: blue;
color:white;
padding: 10px;
width:300px;
}

div.first {
opacity: 0.1;
}

div.second {
opacity: 0.3;
}

div.third {
opacity: 0.6;
}
img {
opacity: 0.3;
}

img:hover {
opacity: 1.0;
}
</style>
</head>
<body>

<h1>Opacity /Transparent</h1>
<div><p>Code Always--1(default)</p></div>
<div class="first"><p>Code Always--0.1 (opacity: 0.1)</p></div>
<div class="second"><p>Code Always--0.3 (opacity: 0.3)</p></div>
<div class="third"><p>Code Always--0.6 (opacity: 0.6;)</p></div>
<hr>
<img src="css.jpg" alt="Forest" width="320px" height="120">

</body>
</html>

Hover your mouse on the image below to change the value of opacity to default(1).

When the above code is compiled , it produces the following result.

Result

Opacity /Transparent

Code Always--1(default)

Code Always--0.1 (opacity: 0.1)

Code Always--0.3 (opacity: 0.3)

Code Always--0.6 (opacity: 0.6;)

css