CSS basic learning--22 image transparency/opacity

1. Transparency property

The transparency of the property in CSS3 is opacity

normal image

The same image with transparency:

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

Remarks: Opacity property values are from 0.0 - 1.0. Smaller values make the element more transparent.

IE8 and earlier versions use filter: alpha(opacity=x). x can take values from 0 - 100. Lower values make the element more transparent.

2. Image Transparency - Hover Effect

Move the mouse over the image:

CSS style code:

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /*  IE8 及其更早版本 */
}
img:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); /* IE8 及其更早版本 */
}

The first CSS block is similar to the code in Example 1. Also, we've added what happens when the user hovers over one of the images. In this case, we want the image to be clear when the user hovers over the image.

This CSS is: opacity=1 .

IE8 and earlier use: filter:alpha(opacity=100) .

When the mouse pointer moves away from the image, the image regains transparency.

3. Text in the transparent box

Renderings:

code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.background
{
  width:500px;
  height:250px;
  background:url(https://www.runoob.com/images/klematis.jpg) repeat;
  border:2px solid black;
}
div.transbox
{
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* IE8 及更早版本 */
}
div.transbox p
{
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
}
</style>
</head>
 
<body>
 
<div class="background">
<div class="transbox">
<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div>
 
</body>
</html>

First, we create a fixed height and width div element with a background image and border. Then we create a smaller div element inside the first div. This div also has a fixed width, background color, border - and it's transparent. Inside the transparent div, we add some text inside the P element.