ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)

CSS 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)

奋力向前
奋力向前オリジナル
2021-08-03 17:43:5315001ブラウズ

前回の記事「htmlを使って簡潔な投稿フォームを作る方法(詳細コード解説)」では、htmlを使ってフォームを作成する方法を紹介しました。 CSSを使って背景色のグラデーションを設定する方法を次の記事で紹介していますので、一緒に見ていきましょう。

CSS 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)

#これらはすべて、さまざまな角度から、独自の方法であらゆる色を表現できます。

RGB モードでは、赤、緑、青の異なるエネルギー比を組み合わせることですべての色を得ることができます。

例:

rgb (100%、0%、0%) は赤、

rgb (100%、50%、0%) はオレンジがかった赤です;

rgb (80%、0%、100%) は紫です。

これらの値はブラウザで個別にテストできます

root { background rgb(100% 0% 0%); }
  • rgb (100%, 0%, 0%) は rgb (255, 0, 0)、各原色は 255 の等しい部分に分割されます。

  • 0 は強度がまったくないことを意味し、255 は強度が最も高いことを意味します。 rgb(255,0,0) と rgb(100,0,0) はどちらも赤ですが、光度が高いため、前者の方が後者よりも鮮やかに見えます。

  • これは白黒でもよく証明されています。 RGB モードの黒は rgb (0, 0, 0) (3 つすべてが発光しない)、白は rgb (255, 255, 255) (3 つすべてが最も強い光を発光) です。

CSS で div グラデーション背景を設定する方法

1. div タグを使用します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

2. header タグ内に <div> タグを設定します。 <pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;css颜色渐变&lt;/title&gt; &lt;style type=&quot;text/css&quot;&gt; div{ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>3. カラー グラデーションの場合、<code>widthheight (div の幅と高さ) を設定する必要があります。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

4. 次に、divbackground 背景属性を設定します。背景色のグラデーションには -webkit-linear-gradient を使用します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
				background:-webkit-linear-gradient();
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

5. -webkit-linear-gradienttop と記述し、上から始まり下で終わるようにグラデーションを設定します。 topと書く場合は、bottomとは書かないでください。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
				background:-webkit-linear-gradient(top);
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

6. 次に、色のグラデーションの順序を設定します。さらに多くの色を設定できます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>css颜色渐变</title> 
		<style type="text/css">
			div{
				width:150px;
				height:70ps;
				background:-webkit-linear-gradient(top,white,lightblue,skyblue);
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

レンダリングは次のとおりです:

CSS 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)

推奨学習: CSS ビデオ チュートリアル

以上がCSS 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:img タグを使用して画像効果を追加する方法を段階的に説明します (知識)次の記事:img タグを使用して画像効果を追加する方法を段階的に説明します (知識)

関連記事

続きを見る