CSSで画像の透明度を設定して画像を徐々に消す方法-CSSチュートリアル-php.cn

CSSで画像の透明度を設定して画像を徐々に消す方法

WBOY

リリース： 2021-11-26 18:45:29

オリジナル

3276 人が閲覧しました

CSS では、「linear-gradient()」関数と「rgba()」関数を使用して、画像が徐々に消えるように画像の透明度を設定できます。構文は「linear-gradient(direction,rgba)」です。 (255,255,255,1), rgba(255,255,255,0));”。

CSSで画像の透明度を設定して画像を徐々に消す方法

このチュートリアルの動作環境: Windows 7 システム、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で画像の透明度を設定して画像を徐々に消す方法