Vollständiger Code zur Implementierung der CSS3-Deckkraft-CSS-Tutorial-php.cn

Vollständiger Code zur Implementierung der CSS3-Deckkraft

高洛峰

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

Original

2702 Leute haben es durchsucht

Wie stelle ich die Transparenz ein? Definieren Sie das Opazitätsattribut, um jedes Element halbtransparent zu machen:

|inherit

nimmt Wertbeschreibung:

1. | ist ein Längenwert, der aus einer Gleitkommazahl und einer Einheitenkennung besteht. Es kann kein negativer Wert sein und der Standardwert ist 1. Wenn der Deckkraftwert 1 ist, ist das Element vollständig undurchsichtig; wenn der Wert 0 ist, ist das Element vollständig transparent und unsichtbar.

2. Erben bedeutet Vererbung, also das Erben der Deckkraft des übergeordneten Elements.

3. Für den IE-Browser können Sie seinen privaten Attributfilter verwenden, um kompatibel zu sein: filter: alpha (alpha=value);.

Beispiel: Entwerfen eines Leuchtkasten-Werbehintergrundstoffs

<!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="Vollständiger Code zur Implementierung der CSS3-Deckkraft" ></p>  
<p class="bg"></p>  
<p class="lightbox"><img  src="images/web_bg_10.png"    style="max-width:90%" / alt="Vollständiger Code zur Implementierung der CSS3-Deckkraft" ></p>  
</body>

Nach dem Login kopieren

Demonstrationsrenderings:

Vollständiger Code zur Implementierung der CSS3-Deckkraft

Verwandte Artikel:

CSS, um ein Element als durchscheinend festzulegen

CSS3-Tutorial (8): CSS3-Transparenzleitfaden

CSS3 Ein Beispiel für die Verwendung von RGBa zum Anpassen der Transparenz

Das obige ist der detaillierte Inhalt vonVollständiger Code zur Implementierung der CSS3-Deckkraft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!