So erreichen Sie Transparenz und Deckkraft von Bildern in CSS (vollständiger Code)-CSS-Tutorial-php.cn

So erreichen Sie Transparenz und Deckkraft von Bildern in CSS (vollständiger Code)

不言

Freigeben： 2018-08-21 11:10:53

Original

2259 Leute haben es durchsucht

Der Inhalt dieses Artikels handelt davon, wie man Transparenz und Deckkraft von Bildern in CSS erreicht (vollständiger Code). Ich hoffe, dass er für Sie hilfreich ist.

1. Das Deckkraftelement wird verwendet, um das Bild transparent und undurchsichtig zu machen. Im Allgemeinen ist 0,4 oder 0,6 ausreichend.

Die Schreibmethode für Browser unter 2.ie8 ist: filter:alpha(opacity=40); der Wert liegt zwischen 0 und 100. Im Allgemeinen werden aus Kompatibilitätsgründen zwei Typen gleichzeitig geschrieben.

3. Es gibt zwei Möglichkeiten, es zu verwenden: direkt auf das Bild zu schreiben, um die Unschärfe des Bildes zu erhöhen (entspricht einer grauen Maske); p und das verschachtelte p mit Farbmaske geschrieben wird, können Sie darin auch Text hinzufügen. Die spezifische Schreibmethode ist wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img{
width:400px;
height:300px;
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover{
opacity:1;
filter:alpha(opacity=100);/*ie8以下写法*/
}
.background{
background:url(&#39;img/t01753ed63dad21cb88.jpg&#39;) no-repeat;
width:400px;
height:300px;
}
.transparent{
width:400px;
height:300px;
background-color:#f941f3;
opacity:0.4;
filter:alpha(opacity=40);
}
.transparent:hover{
opacity:0;
filter:alpha(opacity=0);
}
p{
font-size:48px;
display:block;
color:white;
text-align:center;
line-height:300px;
 
 
}
</style>
</head>
<body>
<img  src="img/t010c6ea3d87e5dcc351.jpg"/ alt="So erreichen Sie Transparenz und Deckkraft von Bildern in CSS (vollständiger Code)" >
<div class="background">
<div class="transparent">
<p>filter:alpha</p>
</div>
</div>
</body>
</html>

Nach dem Login kopieren

Laufeffekt:

So erreichen Sie Transparenz und Deckkraft von Bildern in CSS (vollständiger Code)

Hinweis:

1 Verwenden Sie zum Festlegen die Pseudoklasse:hover Bewegen Sie die Maus zur Bildtransparenz oben.

2. Beim Schreiben eines Hintergrundbilds in ein Div ist die Standardhöhe 0. Die Höhe muss begrenzt werden, um die volle Größe des Bildes anzuzeigen.

Verwandte Empfehlungen:

CSS-Hintergrund transparenter Text undurchsichtig_html/css_WEB-ITnose

CSS, um transparenten Hintergrund und undurchsichtigen Text zu erzielen (kompatibel mit allen Browsern)

Das obige ist der detaillierte Inhalt vonSo erreichen Sie Transparenz und Deckkraft von Bildern in CSS (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!