ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで不透明度のグラデーションを実現する方法

CSSで不透明度のグラデーションを実現する方法

青灯夜游
青灯夜游オリジナル
2021-07-22 11:59:513488ブラウズ

CSS では、linear-gradient() または Radial-gradient() グラデーション関数を rgba() と組み合わせて使用​​して、不透明度のグラデーションを設定できます。 Linear-gradient() と Radial-gradient() はグラデーションを設定でき、rgba() は不透明度を制御できます。

CSSで不透明度のグラデーションを実現する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS では、rgba() とともに Linear-gradient() または Radial-gradient() グラデーション関数を使用して、不透明度のグラデーションを設定できます。

linear-gradient() 関数とradial-gradient() 関数は、グラデーション効果を設定できます。

  • linear-gradient(): 線形グラデーションを作成します。

  • radial-gradient(): 放射状グラデーションを作成します

rgba() 関数は赤 (R)、緑 (G)、青を使用します。 (B) 、透明度 (A) をオーバーレイしてさまざまな色を生成します。

コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片透明度渐变实例演示</title>
		<style>
			div{
				box-sizing: border-box;
				width: 400px;
				height: 320px;
				font-size: 22px;
				padding-top: 100px;
				overflow: hidden;
				background: no-repeat center top / 100% 100%;
			}
			.div1 { 
				background-image: url(img/1.jpg)
			}
			.div2 {
				background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/1.jpg)
			}
			.div3 {
				background-image: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 1)), url(img/1.jpg)
			}
			
		</style>
		<div class="div1">正常图片</div><br>
		<div class="div2">设置线性渐变不透明度效果的图片</div>
		<div class="div3">设置径向渐变不透明度效果的图片</div>
		</body>

</html>

レンダリング:

CSSで不透明度のグラデーションを実現する方法

CSSで不透明度のグラデーションを実現する方法

##説明:

線形グラデーションを作成するには、少なくとも 2 つのカラー ノードを定義する必要があります。カラー ノードは、滑らかな遷移を示したい色です。同時に、開始点と方向(または角度)を設定することもできます。構文は次のとおりです。

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

例:

CSSで不透明度のグラデーションを実現する方法

放射状グラデーションは、その中心によって定義されます。

放射状グラデーションを作成するには、少なくとも 2 つのカラー ノードも定義する必要があります。カラー ノードは、滑らかな遷移を示したい色です。同時に、グラデーションの中心、形状 (円または楕円)、サイズも指定できます。デフォルトでは、グラデーションの中心は center (中心点を意味します)、グラデーションの形状は ellipse (楕円を意味します)、グラデーションのサイズは farthest-corner (最も遠い隅までを意味します) です。

文法:


 background-image:radial-gradient(shape size at position, start-color, ..., last-color);

例:

CSSで不透明度のグラデーションを実現する方法

(学習ビデオ共有:

css ビデオ チュートリアル)

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。