ホームページ > 記事 > ウェブフロントエンド > CSS 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)
CSS 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)
- 奋力向前オリジナル
- 2021-08-03 17:43:5314980ブラウズ
前回の記事「htmlを使って簡潔な投稿フォームを作る方法（詳細コード解説）」では、htmlを使ってフォームを作成する方法を紹介しました。 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 ビデオ チュートリアル
以上がCSS 記事: ページの背景にグラデーション効果を設定する方法 (詳細なコードの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。