Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Bildtransparenz in CSS fest, damit das Bild allmählich verschwindet
So legen Sie die Bildtransparenz in CSS fest, damit das Bild allmählich verschwindet
- WBOYOriginal
- 2021-11-26 18:45:293376Durchsuche
In CSS können Sie die Funktionen „linear-gradient()“ und „rgba()“ verwenden, um die Bildtransparenz so einzustellen, dass das Bild allmählich verschwindet. Die Syntax lautet „linear-gradient(direction,rgba(255,255,255,1). ),rgba(255,255,255, 0));“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So stellen Sie die Bildtransparenz in CSS ein, damit das Bild allmählich verschwindet
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
<style>
.div1 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(1118.02.png)
}
</style>
<div class="div1">设置透明度渐变效果的图片</div>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo legen Sie die Bildtransparenz in CSS fest, damit das Bild allmählich verschwindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Was ist die Methode, um die Höhe einer bestimmten Zeile einer Tabelle in CSS festzulegen?
- So legen Sie die Höhe und Breite von Zellen in CSS fest
- So legen Sie ein Hintergrundbild für eine Schaltfläche in CSS fest
- So legen Sie die Farbe des CSS-Tabellenfelds fest
- So legen Sie das Hintergrundbild der Navigationsleiste in CSS fest