CSS3で背景色のグラデーションを実装するにはどうすればよいですか? (写真 + ビデオ)-CSSの知識-php.cn

CSS3で背景色のグラデーションを実装するにはどうすればよいですか? (写真 + ビデオ)

藏色散人

リリース： 2018-10-16 09:52:35

オリジナル

6562 人が閲覧しました

この記事では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/ を表します。右/斜め。

この例では、パラメータは左から始まる線形グラデーションを表します。最初は透明で、徐々に黒に変わります。

効果は以下のようになります:

CSS3で背景色のグラデーションを実装するにはどうすればよいですか? (写真 + ビデオ) ##4 番目の属性:

linear-gradient()

も表します。直線性グラデーションは標準的な構文にすぎません。
この例では、そのパラメーターは、黒から始まり、ゆっくりと透明に移行する、左から右への線形グラデーションを表します。

CSS3で背景色のグラデーションを実装するにはどうすればよいですか? (写真 + ビデオ) 上記の 2 番目と 3 番目の方法は、単に理解するだけで十分です。

注:

線形グラデーションを作成するには、少なくとも 2 つのカラーノードを定義する必要があります。カラーノードは、スムーズな遷移を示したいカラーです。同時に、開始点と方向（または角度）を設定することもできます。この記事は、CSS3 での背景色のグラデーションの実装について簡単に説明したもので、困っている友人に役立つことを願っています。

フロントエンド関連の知識について詳しく知りたい場合は、PHP 中国語 Web サイトの

css3 ビデオチュートリアル

、Bootstrap ビデオチュートリアル、およびその他の関連するフロントエンドを参照してください。チュートリアルを終了してください。どなたでも学習して参照してください。

以上がCSS3で背景色のグラデーションを実装するにはどうすればよいですか? (写真 + ビデオ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。