Home > Article > Web Front-end > Complete code to implement CSS3 opacity

Complete code to implement CSS3 opacity

高洛峰Original: 2017-03-20 10:45:282662browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of CSS3 RGBA color mode usage example codeNext article：Detailed explanation of CSS3 RGBA color mode usage example code

See more

Complete code to implement CSS3 opacity

Related articles