ホームページ > 記事 > ウェブフロントエンド > CSSで透明度のグラデーションを設定する方法
CSSで透明度のグラデーションを設定する方法
- 藏色散人オリジナル
- 2021-02-03 09:24:5317680ブラウズ
CSS で透明度のグラデーションを設定する方法: 最初に HTML サンプル ファイルを作成し、次に本文に画像を導入し、最後に「linear-gradient()」関数を使用して rgba と連携して透明度のグラデーションを設定します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
css 透明度のグラデーションを設定する
CSS では、rgba() と組み合わせて、linear-gradient() 関数を使用して、透明度のグラデーションを設定できます。 Linear-gradient() 関数はグラデーションの設定に使用され、rgba() 設定は色の透明度の設定に使用されます。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片透明度渐变实例演示</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(1.jpg)
}
.div2 {
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: url(1.jpg)
}
</style>
<div class="div1">设置透明度渐变效果的图片</div>
<div class="div2">正常图片</div>
</body>
</html>レンダリング:
説明:
linear-gradient () 関数は、線形グラデーションの「イメージ」を作成するために使用されます。
線形グラデーションを作成するには、グラデーション効果の開始点と方向 (角度として指定) を設定する必要があります。終了色も定義する必要があります。ストップ カラーは、Gecko に実行させるスムーズなトランジションであり、少なくとも 2 つを指定する必要があります。ただし、より複雑なグラデーション効果を作成するには、より多くの色を指定できます。
css 構文:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
RGBA ()
RGBA は (赤-緑-青-アルファ) を意味します。 「アルファ」チャネルを含む RGB の拡張機能。これにより、カラー値の透明度を設定できます。
推奨: 「css ビデオ チュートリアル 」
以上がCSSで透明度のグラデーションを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。