CSS image transparent/opaque
CSS ImagesTransparent/Opaque
It’s easy to create transparent images using CSS.
Note: The CSS Opacity property is part of the W3C’s CSS3 recommendations.
Example 1 - Creating a Transparent Image
The transparency property in CSS3 is opacity.
First we will show you how Create a transparent image with CSS.
Normal image
The same image with transparency:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>Run the program to see
Look at the following CSS:
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
Example 2 - Image Transparency - Hover Effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
The first CSS block is similar to the code in Example 1. Additionally, 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 it.
This CSS is: opacity=1.
IE8 and earlier versions use: filter:alpha(opacity=100).
When the mouse pointer moves away from the image, the image will regain transparency.
Example 3 - Text in a transparent box
The text is in a transparent box. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes. The texts are in transparent boxes.
The source code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div.background
{
width:500px;
height:250px;
background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color: #fcffe0;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
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>Run the program and try it
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
