CSS 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

奋力向前

Aug 03, 2021 pm 05:43 PM

css

前回の記事「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;'><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css颜色渐变</title> <style type="text/css"> div{ } </style> </head> <body> <div> </div> </body> </html></pre><p>3. カラーグラデーションの場合、<code>width と height (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. 次に、div の background 背景属性を設定します。背景色のグラデーションには -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-gradient に top と記述し、上から始まり下で終わるようにグラデーションを設定します。 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 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)