Heim > Artikel > Web-Frontend > So erreichen Sie Transparenz und Deckkraft von Bildern in CSS (vollständiger Code)

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

不言Original: 2018-08-21 11:10:532201Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie implementiert man ein Dropdown-Menü in CSS? So implementieren Sie ein Dropdown-Menü in CSS (vollständiger Code)Nächster Artikel：Wie implementiert man ein Dropdown-Menü in CSS? So implementieren Sie ein Dropdown-Menü in CSS (vollständiger Code)

In Verbindung stehende Artikel

Mehr sehen