ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで画像の透明度を設定して画像を徐々に消す方法
CSSで画像の透明度を設定して画像を徐々に消す方法
- WBOYオリジナル
- 2021-11-26 18:45:293405ブラウズ
CSS では、「linear-gradient()」関数と「rgba()」関数を使用して、画像が徐々に消えるように画像の透明度を設定できます。構文は「linear-gradient(direction,rgba)」です。 (255,255,255,1), rgba(255,255,255,0));”。
このチュートリアルの動作環境: 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 ビデオ チュートリアル)
以上がCSSで画像の透明度を設定して画像を徐々に消す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。