The opacity property specifies the opacity/transparency of an element.
opacity 0.2
opacity 0.5
opacity 1
(default)
Example
img {
opacity: 0.5;
}
Example
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Example explained
The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.
When the mouse pointer moves away from the image, the image will be transparent again.
An example of reversed hover effect:
Example
img:hover {
opacity: 0.5;
}
Example
div {
opacity: 0.3;
}
You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.
Example
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
Example
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
img {
____ : ____;
}
</style>
<body>
<img src="https://edurev.gumlet.io/lematis.jpg" width="150" height="113">
</body>
<style>
img {
opacity : θ.5;
}
</style>
<body>
<img src="https://edurev.gumlet.io/lematis.jpg" width="150" height="113">
</body>
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|