How to set transparency? Define the opacity attribute. By setting this attribute, any element can be made semi-transparent. The basic syntax of the opacity attribute is as follows:
Take Value description:
1.
2. Inherit means inheritance, that is, inheriting the opacity of the parent element.
3. For IE browser, you can use its private attribute filter to be compatible: filter: alpha (alpha=value);.
Example: Designing light box advertising background cloth
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>opacity</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
p { position:absolute; }
.bg {
width:100%;
height:100%;
background:#000;
opacity:0.7;
filter:alpha(opacity=70);
}
.lightbox {
left:50px;
top:50px;
}
</style>
</head>
<body>
<p class="web"><img src="images/web_bg_9.jpg" style="max-width:90%" style="max-width:90%" / alt="Complete code to implement CSS3 opacity" ></p>
<p class="bg"></p>
<p class="lightbox"><img src="images/web_bg_10.png" style="max-width:90%" / alt="Complete code to implement CSS3 opacity" ></p>
</body>Demonstration renderings:
Related articles:
CSS sets an element to be translucent
CSS3 Tutorial (8): CSS3 Transparency Guide
Used in CSS3 Example of adjusting transparency using RGBa
The above is the detailed content of Complete code to implement CSS3 opacity. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
