CSSで透明度のグラデーションを設定する方法-CSSチュートリアル-php.cn

CSSで透明度のグラデーションを設定する方法

藏色散人

リリース： 2022-12-30 11:13:33

オリジナル

17696 人が閲覧しました

CSS で透明度のグラデーションを設定する方法: 最初に HTML サンプルファイルを作成し、次に本文に画像を導入し、最後に「linear-gradient()」関数を使用して rgba と連携して透明度のグラデーションを設定します。

CSSで透明度のグラデーションを設定する方法

この記事の動作環境: 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>

ログイン後にコピー

レンダリング:

CSSで透明度のグラデーションを設定する方法

説明:

linear-gradient () 関数は、線形グラデーションの「イメージ」を作成するために使用されます。

線形グラデーションを作成するには、グラデーション効果の開始点と方向 (角度として指定) を設定する必要があります。終了色も定義する必要があります。ストップカラーは、Gecko に実行させるスムーズなトランジションであり、少なくとも 2 つを指定する必要があります。ただし、より複雑なグラデーション効果を作成するには、より多くの色を指定できます。

css 構文:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

ログイン後にコピー

RGBA ()

RGBA は (赤-緑-青-アルファ) を意味します。「アルファ」チャネルを含む RGB の拡張機能。これにより、カラー値の透明度を設定できます。

推奨: 「css ビデオチュートリアル」

以上がCSSで透明度のグラデーションを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。