CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。

CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。

CSS3 背景画像関連

互換性: IE9+

背景クリップ 背景画像描画領域

background-clip:border-box; コンテンツ領域

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        背景:url(source/p3.jpg) 中央;
        パディング:50p​​x;
        border:50px 透明;
        背景クリップ:コンテンツボックス;
        /*背景クリップ:パディングボックス;*/
        /*背景クリップ:境界線ボックス;*/
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

background-clip:padding-box; パディング領域

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        背景:url(source/p3.jpg) 中央;
        パディング:50p​​x;
        border:50px 透明;
        背景クリップ:パディングボックス;
        /*背景クリップ:境界線ボックス;*/
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

background-clip:border-box; 境界領域

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        背景:url(source/p3.jpg) 50px 50px 繰り返しなし;
        パディング:50p​​x;
        border:50px 透明;
        背景の原点:境界線ボックス;
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

background-origin: content-box | padding-box | border-box; 背景画像の開始位置

背景画像は、境界ボックスから水平方向および垂直方向に 50 ピクセル下方にオフセットされます。

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        背景:url(source/p3.jpg) 50px 50px 繰り返しなし;
        パディング:50p​​x;
        border:50px 透明;
        背景の原点:パディングボックス;
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

背景画像はパディングボックスから水平方向および垂直方向に50ピクセル下方にオフセットされています。

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        背景:url(source/p3.jpg) 50px 50px 繰り返しなし;
        パディング:50p​​x;
        border:50px 透明;
        背景のオリジン:コンテンツボックス;
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

背景画像はコンテンツボックスから水平方向および垂直方向に50ピクセル下方にオフセットされています。

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        背景:url(source/p2.jpg) 50px 50px 繰り返しなし;
        background-size:100%;/*幅はコンテナの幅の100%、高さは画像に比例します*/
        background-size:100% 100%;/*幅はコンテナの幅の100%、高さはコンテナの高さの100%です*/
        背景サイズ:カバー;
        背景サイズ:contain;
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

background-size: 数値またはパーセンテージを入力するときに、1つの値のみを入力すると、もう1つの値はデフォルトで自動に設定されます。

カバーは比例スケーリングでコンテナを埋めます

片側が容器の端に触れるまでスケールを均等に保持する

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        背景:url(source/p2.jpg) 50px 50px 繰り返しなし;
        background-size:100%;/*幅はコンテナの幅の100%、高さは画像に比例します*/
        background-size:100% 100%;/*幅はコンテナの幅の100%、高さはコンテナの高さの100%です*/
        背景サイズ:カバー;
        背景サイズ:contain;
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

複数の背景画像

background-image:url(),url();

前の画像が次の画像を覆います。

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        背景画像:url(source/shuiyin.png), url(source/cat.jpg);

    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

色を透明に設定: 透明

CSS3 グラデーション

互換性: IE10

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        background:-webkit-linear-gradient(pink, orange, #abcdef);/*デフォルトは垂直です*/
        background: -moz-linear-gradient(pink, orange, #abcdef);/*デフォルトは垂直です*/
        背景: -o-linear-gradient(pink, orange, #abcdef);/*デフォルトは垂直です*/
        background: linear-gradient(pink, orange, #abcdef);/*デフォルトは垂直です*/

        background:-webkit-linear-gradient(left, pink, orange, #abcdef);/*左から右へ*/
        背景: -moz-linear-gradient(right, pink, orange, #abcdef);
        背景: -o-linear-gradient(right, pink, orange, #abcdef);
        背景: linear-gradient(右へ、ピンク、オレンジ、#abcdef);

        background:-webkit-linear-gradient(left top, pink, orange, #abcdef);/*左上から右下へ*/
        背景: -moz-linear-gradient(右下、ピンク、オレンジ、#abcdef);
        背景: -o-linear-gradient(右下、ピンク、オレンジ、#abcdef);
        背景: 線形グラデーション(右下、ピンク、オレンジ、#abcdef);
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

通常の線形グラデーションの角度

Webkitカーネルでの線形グラデーションの角度

解決策: 互換性のあるブラウザのプレフィックスが順に記述され、プレフィックスのないブラウザは通常最後に配置されます。

色を特定の位置に割り当てることができる

最初の色が指定されていない場合は、デフォルトで 0% になります。最後の色はデフォルトで 100% になります。

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        background:-webkit-linear-gradient(45deg, pink, orange, #abcdef);/*特定の角度の表現*/
        背景: -moz-linear-gradient(45deg, ピンク, オレンジ, #abcdef);
        背景: -o-linear-gradient(45deg, ピンク, オレンジ, #abcdef);
        背景: linear-gradient(45deg, pink, orange, #abcdef);

        background:-webkit-linear-gradient(90deg, オレンジ, ピンク 30%, 紫 70%, #abcdef);
        背景: -moz-linear-gradient(90deg, オレンジ, ピンク 30%, 紫 70%, #abcdef);
        背景: -o-linear-gradient(90deg, オレンジ, ピンク 30%, 紫 70%, #abcdef);
        背景: linear-gradient(90度、オレンジ、ピンク30%、紫70%、#abcdef);
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

rgba() は透明色のグラデーションを設定できます

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        background:-webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));/*特定の角度の表現*/
        背景: -moz-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        背景: -o-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        背景: linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));

    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

繰り返しグラデーション

繰り返し線形グラデーション

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 500ピクセル;
        高さ: 500px;
        背景:-webkit-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        背景: -moz-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        背景: -o-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        背景: repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);

    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

放射状グラデーション

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 400ピクセル;
        高さ: 200px;
        境界線の半径:50%;
        背景:-webkit-radial-gradient(ピンク、#abcdef);
        背景: -moz-radial-gradient(ピンク、#abcdef);
        背景: -o-radial-gradient(ピンク、#abcdef);
        背景: 放射状グラデーション(ピンク、#abcdef);
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

円形グラデーションを維持する

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 400ピクセル;
        高さ: 200px;
        境界線の半径:50%;
        背景:-webkit-radial-gradient(円、ピンク、#abcdef);
        背景: -moz-radial-gradient(circle, pink, #abcdef);
        背景: -o-radial-gradient(円、ピンク、#abcdef);
        背景: 放射状グラデーション(円、ピンク、#abcdef);
    }
</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

サイズ 最も近い側 最も近い角 最も遠い側 最も遠い角

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 200ピクセル;
        高さ: 100px;
        境界線の半径:50%;
        下マージン:50px;
        行の高さ: 100px;
        テキスト配置: 中央;
/* background:-webkit-radial-gradient(circle, pink, #abcdef);
        背景: -moz-radial-gradient(circle, pink, #abcdef);
        背景: -o-radial-gradient(円、ピンク、#abcdef);
        背景: 放射状グラデーション(円、ピンク、#abcdef);*/
    }
    div:n番目の子(1){
        background:-webkit-radial-gradient(closest-side 円、ピンク、#abcdef);
        背景: -moz-radial-gradient(closest-side circle, pink, #abcdef);
        背景: -o-radial-gradient(最も近い円、ピンク、#abcdef);
        背景: 放射状グラデーション(最も近い円、ピンク、#abcdef);
    }
    div:n番目の子(2){
        background:-webkit-radial-gradient(最も近い角の円、ピンク、#abcdef);
        背景: -moz-radial-gradient(最も近い角の円、ピンク、#abcdef);
        背景: -o-radial-gradient(最も近い角の円、ピンク、#abcdef);
        背景: 放射状グラデーション(最も近い角の円、ピンク、#abcdef);
    }
    div:n番目の子(3){
        background:-webkit-radial-gradient(最も遠い側の円、ピンク、#abcdef);
        背景: -moz-radial-gradient(最も遠い側の円、ピンク、#abcdef);
        背景: -o-radial-gradient(最も遠い側の円、ピンク、#abcdef);
        背景: 放射状グラデーション(最も遠い側の円、ピンク、#abcdef);
    }
    div:n番目の子(4){
        background:-webkit-radial-gradient(最隅の円、ピンク、#abcdef);
        背景: -moz-radial-gradient(最隅の円、ピンク、#abcdef);
        背景: -o-radial-gradient(最隅の円、ピンク、#abcdef);
        背景: 放射状グラデーション(最隅の円、ピンク、#abcdef);
    }
</スタイル>
</head>
<本文>
    <div>最も近い側</div>
    <div>最も近いコーナー</div>
    <div>一番遠い側</div>
    <div>一番遠い角</div>
</本文>
</html>

グラデーションの中心位置を設定する

水平方向に幅の10%、垂直方向に高さの20%

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 200ピクセル;
        高さ: 100px;
        下マージン:50px;
        行の高さ: 100px;
        テキスト配置: 中央;
/* background:-webkit-radial-gradient(circle, pink, #abcdef);
        背景: -moz-radial-gradient(circle, pink, #abcdef);
        背景: -o-radial-gradient(円、ピンク、#abcdef);
        背景: 放射状グラデーション(円、ピンク、#abcdef);*/
    }
    div:n番目の子(1){
        background:-webkit-radial-gradient(10% 20%, closet-side circle, pink, #abcdef);
        背景: -moz-radial-gradient(10% 20%, 最も近い側の円, ピンク, #abcdef);
        背景: -o-radial-gradient(10% 20%, 最も近い側の円, ピンク, #abcdef);
        背景: 放射状グラデーション(10% 20%、最も近い側の円、ピンク、#abcdef);
    }
    div:n番目の子(2){
        background:-webkit-radial-gradient(10% 20%, 最も近い角の円, ピンク, #abcdef);
        背景: -moz-radial-gradient(10% 20%, 最も近い角の円, ピンク, #abcdef);
        背景: -o-radial-gradient(10% 20%, 最も近い角の円, ピンク, #abcdef);
        背景: 放射状グラデーション(10% 20%、最も近い角の円、ピンク、#abcdef);
    }
    div:n番目の子(3){
        background:-webkit-radial-gradient(10% 20%, 最も遠い側の円, ピンク, #abcdef);
        背景: -moz-radial-gradient(10% 20%, 最も遠い側の円, ピンク, #abcdef);
        背景: -o-radial-gradient(10% 20%, 最も遠い側の円, ピンク, #abcdef);
        背景: 放射状グラデーション(10% 20%、最も遠い側の円、ピンク、#abcdef);
    }
    div:n番目の子(4){
        background:-webkit-radial-gradient(10% 20%、最端の円、ピンク、#abcdef);
        背景: -moz-radial-gradient(10% 20%, 最端の円, ピンク, #abcdef);
        背景: -o-radial-gradient(10% 20%, 最端の円, ピンク, #abcdef);
        背景: 放射状グラデーション(10% 20%、最隅の円、ピンク、#abcdef);
    }
</スタイル>
</head>
<本文>
    <div>最も近い側</div>
    <div>最も近いコーナー</div>
    <div>一番遠い側</div>
    <div>一番遠い角</div>
</本文>
</html>

repeating-radial-gradient 放射状グラデーションの繰り返し

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 200ピクセル;
        高さ: 100px;
        下マージン:50px;
        行の高さ: 100px;
        テキスト配置: 中央;
        背景:-webkit-repeating-radial-gradient(円、ピンク、#abcdef 20%);
        背景: -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        背景: -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
        背景: repeating-radial-gradient(円、ピンク、#abcdef 20%);
    }

</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

IEブラウザのグラデーション

IE10+はグラデーションをサポート

IE6-8 フィルター使用

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 200ピクセル;
        高さ: 100px;
        下マージン:50px;
        行の高さ: 100px;
        テキスト配置: 中央;
        背景:-webkit-repeating-radial-gradient(円、ピンク、#abcdef 20%);
        背景: -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        背景: -o-repeating-radial-gradient(円、ピンク、#abcdef 20%);
        背景: repeating-radial-gradient(円、ピンク、#abcdef 20%);
        フィルター: progid:DXImageTransform.Microsoft.gradient(startcolorstr=pink,endcolorstr=#abcdef,gradientType=1);
    }

</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

IEコンソールを使用してIEブラウザのバージョンを切り替える

IE フィルター

0 左から右への線形グラデーション

1 上から下への線形グラデーション

実際の事例:

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{
        幅: 600ピクセル;
        高さ: 300px;
        背景色:#abcdef;
        背景サイズ:100px 100px;
        背景画像:-webkit-linear-gradient(45度、ピンク25%、透明25%)、
                         -webkit-linear-gradient(-45度、ピンク25%、透明25%)、
                         -webkit-linear-gradient(45度、透明75%、ピンク75%)、
                         -webkit-linear-gradient(-45度、透明75%、ピンク75%);
        背景画像:-moz-linear-gradient(45度、ピンク25%、透明25%)、
                         -moz-linear-gradient(-45度、ピンク25%、透明25%)、
                         -moz-linear-gradient(45度、透明75%、ピンク75%)、
                         -moz-linear-gradient(-45度、透明75%、ピンク75%);
        背景画像:-o-線形グラデーション(45度、ピンク25%、透明25%)、
                         -o-線形グラデーション(-45度、ピンク25%、透明25%)、
                         -o-線形グラデーション(45度、透明75%、ピンク75%)、
                         -o-linear-gradient(-45度、透明75%、ピンク75%);
        背景画像:線形グラデーション(45度、ピンク25%、透明25%)、
                         線形グラデーション(-45度、ピンク25%、透明25%)、
                         線形グラデーション(45度、透明75%、ピンク75%)
                         linear-gradient(-45度、透明75%、ピンク75%);
    }

</スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

<<:  ウェブデザイナーもウェブコーディングを学ぶ必要がある

>>:  jQueryアニメーションを理解するのに役立つ記事

推薦する

MySQL のバックアップとリカバリの設計アイデア

背景まず、背景を説明します。ある制約により、当社の現在のバックアップ戦略では、1 日おきにフル バッ...

nodejs + koa + typescript の統合と自動再起動に関する問題

目次バージョンノートプロジェクトを作成する依存関係をインストールするコンテンツの記入src/serv...

Linux での Nginx アンチホットリンクと最適化の実装コード

バージョン番号を非表示バージョン番号は非表示になっていません。セキュリティを強化するために、バージョ...

React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...

MySQLでテーブルを接続するいくつかの方法

MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...

Linux のバックグラウンドで実行するいくつかの方法 (まとめ)

1. ノーフープハングアップ信号を無視してプログラムを実行する追加メモnohup コマンドは、ハン...

HTMLのmarquee属性でテキストを踊らせる

構文: <marquee> …</marquee>モバイル属性マーキーを使用...

HTMLページ間で値を渡す問題の解決策

初めてこのエッセイを使ったとき、私はかなりぎこちなく感じましたhtmlファイルコードをコピーコードは...

MySQLのワークベンチ例の詳細な説明

MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...

CSS で QR コードスキャンボックスを実装するためのサンプルコード

カメラを開くと通常はスキャンボックスが表示されますが、静的なQRコードではフォーカスを合わせたりスキ...

Linuxでkv設定ファイルを変更するにはsedコマンドを使用します

sed は Unix の文字ストリーム エディタ、つまりストリーム エディタです。行指向であり、行単...

JavaScript による省・市連携効果の実現

この記事では、省と都市間の連携効果を実現するためのJavaScriptの具体的なコードを参考までに共...

MySQL インデックスの正しい使い方とインデックスの原理の詳細な説明

1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...

ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプル コード

序文：私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...

MySQL 8の新機能ウィンドウ関数の役割

MySQL 8.0 の新機能は次のとおりです。 Unicode 9.0 をすぐに完全にサポートウィン...