Complete code to implement CSS3 opacity-CSS Tutorial-php.cn

Complete code to implement CSS3 opacity

高洛峰

Release： 2017-03-20 10:45:28

Original

2645 people have browsed it

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:

|inherit

Take Value description:

1. | is a length value composed of a floating point number and a unit identifier. It cannot be a negative value, and the default value is 1. When the opacity value is 1, the element is completely opaque; conversely, when the value is 0, the element is completely transparent and invisible.

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>

Copy after login

Demonstration renderings:

Complete code to implement CSS3 opacity

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!