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!
