首頁 > 文章 > web前端 > css如何設定圖片透明度使圖片逐漸消失

css如何設定圖片透明度使圖片逐漸消失

WBOY原創: 2021-11-26 18:45:293356瀏覽

css中，可利用「linear-gradient()」和「rgba()」函數來設定圖片透明度使圖片逐漸消失，語法為「linear-gradient(方向,rgba(255,255,255,1), rgba(255,255,255,0));」。

css如何設定圖片透明度使圖片逐漸消失

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css怎麼設定圖片透明度使圖片逐漸消失

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

輸出結果：

css如何設定圖片透明度使圖片逐漸消失

（學習影片分享：css影片教學）

以上是css如何設定圖片透明度使圖片逐漸消失的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css如何設定導航條背景圖片下一篇：css如何設定導航條背景圖片

看更多