ホームページ >毎日のプログラミング >CSSの知識 >CSS3で背景色のグラデーションを実装するにはどうすればよいですか? (写真 + ビデオ)
CSS3で背景色のグラデーションを実装するにはどうすればよいですか? (写真 + ビデオ)
- 藏色散人オリジナル
- 2018-10-16 09:35:176591ブラウズ
この記事ではcss3の背景グラデーションの実装方法のまとめを中心に紹介します。
フロントエンド開発のプロセスでは、Web サイトのスタイル コンテンツを豊かにするために、背景色のグラデーションが非常に優れた視覚効果をもたらします。いわゆる CSS3 gradient (グラデーション) を使用すると、指定した 2 つ以上の色の間で滑らかな遷移を表示できます。
すでに始めているフロントエンド研究者にとって、css3 背景グラデーションの実装は間違いなく非常に簡単です。しかし、初心者の友達にとっては、それはまだ明確ではないかもしれません。
以下では、簡単なコード例を組み合わせて、背景色のグラデーション効果を実現する css3 メソッドを要約します。
コード例は次のとおりです。<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3背景渐变实例</title>
<head>
<style>
#grad{
background: black;
/* 第一种：-webkit-linear-gradient()，统配各种浏览器*/
background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,1));
/* 第二种：-o-linear-gradient，Opera浏览器*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(0,0,0,1));
/* 第三种：-moz-linear-gradient，火狐浏览器*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(0,0,0,1));
/* 第四种：linear-gradient()，统配各种浏览器*/
background: linear-gradient(to left,rgba(255,0,0,0),rgba(0,0,0,1));
}
</style>
</head>
<body id="grad">
</body>
</html>ここでは、ブラウザの互換性に基づいて背景色のグラデーションを実現する 4 つの方法を紹介します。ブラウザーの非互換性を避けるために、1 番目と 4 番目の方法を使用することをお勧めします。 最初の属性:
-webkit-linear-gradient() は、線形グラデーション (Linear Gradients)-down/up/ Left/ を表します。右/斜め。
この例では、パラメータは左から始まる線形グラデーションを表します。最初は透明で、徐々に黒に変わります。 効果は以下のようになります:
##4 番目の属性:
も表します。直線性 グラデーションは標準的な構文にすぎません。
この例では、そのパラメーターは、黒から始まり、ゆっくりと透明に移行する、左から右への線形グラデーションを表します。
上記の 2 番目と 3 番目の方法は、単に理解するだけで十分です。
線形グラデーションを作成するには、少なくとも 2 つのカラー ノードを定義する必要があります。カラー ノードは、スムーズな遷移を示したいカラーです。同時に、開始点と方向（または角度）を設定することもできます。 この記事は、CSS3 での背景色のグラデーションの実装について簡単に説明したもので、困っている友人に役立つことを願っています。
フロントエンド関連の知識について詳しく知りたい場合は、PHP 中国語 Web サイトの
css3 ビデオ チュートリアル、Bootstrap ビデオ チュートリアル、およびその他の関連するフロントエンドを参照してください。チュートリアルを終了してください。どなたでも学習して参照してください。
以上がCSS3で背景色のグラデーションを実装するにはどうすればよいですか? (写真 + ビデオ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。