So legen Sie die Bildtransparenz in CSS fest, damit das Bild allmählich verschwindet-CSS-Tutorial-php.cn

So legen Sie die Bildtransparenz in CSS fest, damit das Bild allmählich verschwindet

WBOY

Freigeben： 2021-11-26 18:45:29

Original

3276 Leute haben es durchsucht

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));“.

So legen Sie die Bildtransparenz in CSS fest, damit das Bild allmählich verschwindet

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>

Nach dem Login kopieren

Ausgabeergebnis:

So legen Sie die Bildtransparenz in CSS fest, damit das Bild allmählich verschwindet

(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!