フロントエンドのやつ！実践的かつ包括的な CSS 背景属性 Manual_html/css_WEB-ITnose

背景は、初期の単色の塗りつぶしから現在に至るまで、背景を設定するために使用される要素であり、グラデーションだけでなく、描画モードも使用できます。今日は、@不bubu によるこの優れた記事で、これらのサブ属性の使用法を 1 つずつ説明します。週末に学習してください。

背景属性は、CSS で要素の背景を設定するために使用される属性です。最も単純な背景属性名は、背景の複数の設定の省略形を組み合わせたものです。初期の CSS では、単一の背景画像しか使用できませんでした。複数の背景画像を設定できるようになりました。写真を使用する代わりに、初期の背景は単色で塗りつぶすことしかできませんでしたが、現在ではさまざまなグラデーション効果を使用できるようになりました。現在使用されているモデルは、CSS Backgrounds and Borders Module Level 3 で定義された仕様に基づいており、主に 8 つのサブプロパティに分かれています。

Background-color

Background-color は、最も古く、最も古く、最も一般的に使用される属性の 1 つであり、その値が唯一の色の値です。

背景画像の背景画像

背景画像は、名前が示すように、背景の「画像」を設定します。ここでの画像は、私たちが通常理解している「画像」ではなく、合成されています。 CSS 画像値と置換コンテンツ モジュールは、CSS2 で指定されている background-image 属性と list-style-image 属性の url パラメータを置換する一連のコンテンツ、または擬似要素コンテンツの値を指定します。現在、ブラウザはこれらを完全に実装していません。利用可能なものには、画像を参照する url() と、グラデーション「画像」、およびすべての画像 (存在する場合) をカンマで区切るものが含まれます。

CSS グラデーション

CSS グラデーションは、linear-gradient() の線形グラデーションと、radial-gradient() の放射状グラデーションの 2 種類に分かれます。初期の異なるブラウザでの 2 つのグラデーションの実装構文はまったく異なっていたため、それを使用する人は少なく、依然として画像を使用する傾向がありましたが、現在ではさまざまなブラウザの表示と実装が基本的に一貫しており、モバイルではより適切な実装が行われています。モバイル開発で広く使用できます (ただし、IE9 と互換性がある場合は、引き続き ╮(╯_╰)╭) を使用して実行することもできます。

線形グラデーション: Linear-gradient(0c0cb308ee3d2ee3281772bfc9b806c2, 5151abf5f2f2896f3332f558b89cf20a[, 6b22e4f809621b65b94f163c16b42e35]+);

• 0c0cb308ee3d2ee3281772bfc9b806c2 , tobottom、to left、to right この 4 つのキーワードと *deg の設定では、0deg (↓) は下に相当し、90deg (←) は左に相当します。
• 5151abf5f2f2896f3332f558b89cf20a、の値は b10fb37415d019cfffa8c4d7366c607f[ 7f952ef31037694d232de8bb3c23c71d]?、最初と最後の色を書き込む必要はありません。中央の色が書き込まれていなければ、すべての色が書き出されます。均等に分散されています。

放射状グラデーション:

radial-gradient([ [ 18b1d935585fae6b48e00ea5f5b48e2d || 971f671fe497569bdb0616a45a44dc0f ] [ at 7f952ef31037694d232de8bb3c23c71d ]? , | at 2a755f918f7c9ae34b19548c553b918a [ , 9abf9243314f6d1cd71ac1087d19db3b ]+)

もともとこの構文を省略したかったのですが、このように書く方が良いことがわかりました) これが標準の書き方であり、私はそれについて真剣に考えました)... 後ろから前へ

9abf9243314f6d1cd71ac1087d19db3b 線形グラデーションのように、b10fb37415d019cfffa8c4d7366c607f[ 7f952ef31037694d232de8bb3c23c71d] ?、も設定できます。複数の色の値は、位置が書かれていない場合、指定された値に従って均等に配分されます。カラーの前には長い文字列があり、放射状グラデーションの中心点、位置、グラデーション モードを定義します。 18b1d935585fae6b48e00ea5f5b48e2d は形状です。要素全体が正方形の場合、オプションの値は同じになります。

971f671fe497569bdb0616a45a44dc0f は、グラデーションの半径を数値で定義できるサイズです。 2 つのサイズ値を順番に入力する必要があります。このとき、サイズはパーセンテージで書くことができます。

サイズには 4 つのキーワードも使用できます。closest-side (最も近い側)、farthest-side (最も遠い側)、closest-corner (最も近い角)、farthest-corner (最も遠い角度)、これら 4 つのキーワード名前が示すとおり、要素を基準にして円の中心を参照します。

7f952ef31037694d232de8bb3c23c71d は円の中心位置です。位置の前に at を追加する必要があります。位置には一般的に使用されるキーワードを使用することも、数値定義を使用することもできます。

たとえば、次の 3 行のコードは同等です:

radial-gradient(yellow, green);radial-gradient(ellipse at center, yellow 0%, green 100%);radial-gradient(farthest-corner at 50% 50%, yellow, green);

グラデーションの繰り返し:repeat-linear-gradient() と繰り返し -radial-gradient()

使用法は上記と同じですが、今回はグラデーションが繰り返されます。 ここには素晴らしいデモがいくつかありますが、もちろん、これは主に、background-blend-mode プロパティを披露するために構築されています。

背景の繰り返しのbackground-repeat

background-repeadは、背景の繰り返し方法を設定するために使用されます。 オプションの値は次のとおりです。

• no-repeat は繰り返さない、no-repeat no-repeat と同等
• repeat-X X 軸方向 (水平) に繰り返す、repeat no-repeat と同等
• repeat-Y Y 軸方向 (縦方向) のリピート、no-repeat リピートと同等
• リピート タイル、repeat リピートと同等 よく使用されるこれら 4 つに加えて、さらに 2 つあります...おそらく多くの人はいないでしょう 便利であまり互換性のない値:
• round 画像は指定された方向に並べて表示され、画像は表示スペースのサイズに応じて拡大縮小されます (ズームするとき、タイルの数をいつ増減するかはブラウザによって決定されます。プロセッサによって決定されます)
• スペース画像は可能な限り繰り返されますが、最初と最後の画像は切り取られません。要素の両端に固定され、残りは均等に配置されます。現時点では、background-position プロパティは無視されます。さらに、トリミングは、画像が要素よりも大きい場合にのみ発生します。

背景固定用の Background-attachment

background-attachment は、背景の相対固定方法を設定するために使用されます。 オプションの値は次のとおりです:

• scroll のデフォルト値、背景は要素に対して固定されます。
• fixed 背景はウィンドウ全体に対して固定されます。最近のフルスクリーンの大きな画像 Web サイトの人気に伴い、この固定背景モードがますます一般的になってきています。
• local 背景は要素のコンテンツに応じて固定されます。要素内にスクロール バーがある場合、背景はコンテンツとともにスクロールします。ローカル モードを使用することはほとんどありません。これは、要素上にスクロール バーが表示されると、スクロール可能な方向に影が表示されるという記事です。これはインタラクション デザインのカテゴリに属しますが、さまざまな Web サイトがユーザー エクスペリエンスをより重視しているため、この需要は遅かれ早かれ起こるだけであり、著者のデモはそれを実装するための非常に興味深い (そして効率的な) 方法です。

背景位置

背景位置は、名前が示すように、位置決めに使用されます...しかし、この位置決め...構文は非常に複雑です (または非常にカジュアルです) 。方向を示す各種キーワードは、数値単位やパーセンテージで使用することもできます。記述方法は次のとおりです。

• 2 つのキーワード (または値) を並べて記述し、最初の値がそれを表します。水平方向の位置、2 番目の値は垂直方向の位置を表します (これは、最初に上下に移動し、次に左右に移動するパディング、マージン、ボーダー属性のちょうど逆です)。さらに、両方がキーワードの場合、位置を交換できます。つまり、中道左派は合法ですが、50% 左派は合法ではありません。
• キーワード (または値) を 1 つだけ記述すると、2 番目の値はデフォルトで中央に配置されます。
• 要素の四辺から3つと4つの値を配置できます。たとえば、右から10px、下から5pxの場合、右10px、下5pxと記述できます。キーワードと値のペアのセットを交換したり、代替のキーワードと値を使用したりできます。この書き込み方法は現在 (2016-06) FF でのみサポートされています。

背景クリッピングのBackground-clip

Background-clipは、背景で覆う範囲を設定する属性です。オプションの値は次のとおりです:

• border-box デフォルト値、背景は境界線の下に拡張されますが、拡張された背景は境界線の色が半透明の場合にのみ表示されます。
• パディングボックスの境界線の下には背景がありません。
• コンテンツ ボックスにはコンテンツの下にのみ背景があります (パディング スペースにはありません)

背景の原点の背景の原点

background-origin背景画像を指定します。 位置決めの原点です。プロパティ値は、background-clip と同じですが、clip は背景画像をトリミングし、origin は位置決めに使用されます。

より明確に示したこのデモをご覧ください。

背景サイズ

背景サイズは、背景サイズを設定するために使用されます。 オプションの値は次のとおりです。

• 値のペア (パーセントまたは自動)。 、パーセンテージはbackground-originで設定されたサイズを基準とし、autoは画像の元のサイズです。2つの値は最初に幅、次に高さです。
• cover は、背景領域を完全に覆うように画像を拡大縮小します。これにより、画像の一部の領域が見えなくなる場合があります。
• contain は、背景領域に最大サイズで完全に表示されるように画像を拡大縮小します。これにより、背景の一部の領域が空白になる場合があります。

トランスフォーマーの背景

背景は上記 8 つの属性の合計です...すべての属性をまとめて記述することができます。順番はスペースで区切るだけで特に制限はありませんが、注意点がいくつかあります。

• 背景サイズを設定する必要がある場合、記述方法は 7f952ef31037694d232de8bb3c23c71d/< になります。 size> を設定する必要があります。同時に合計を / で区切ります。
• background-clipとbackground-originの属性は、値を1つだけ書いた場合は両方の属性に同時に適用され、2つの値を書いた場合は前者がbackgroundになります。 -origin、後者はbackground-clip
• 設定されていない場合はデフォルト値に設定されます。これはpaddingなどの略語と同様です。

合体戦士の複数の背景

CSS3 の時代から、CSS の背景は複数の背景画像をサポートし始めており、それらをまとめて設定できます。

各背景画像をカンマで区切っている限り、ブラウザは順番に読み込み、最後に書かれたものを上に重ねていきます。

個別に設定される背景属性の場合、カンマで区切って個別に設定することもできます。ただし、画像の 1 つの特定の属性のみを設定したい場合は、他の画像を記述する必要があります...

そして、背景の色は一意です (手)。背景を使用する場合は、背景を省略します。 color は最後のカンマの後に設定する必要があります。

他には何がありますか?

また、昨年の最新の Compositing and Blending ドラフトでは、ブレンド モードのドラフト仕様が提案されました。この記事を書いた時点では、背景に関連する属性は 2 つだけでした。主なもの: Chrome と FF ブラウザがこの属性をサポートしています。

Photoshop を使ったことがある人なら、Photoshop のブレンド モードについて聞いたことがあるはずです。この 2 つは似た意味を持ちます。背景ブレンドモードのオプションのパラメータには、標準、乗算、スクリーン、オーバーレイ、暗くする、明るくする、カラードッジ (カラードッジ)、カラーバーン (色を濃くする)、ハードライト (強いライト)、ソフトライト (柔らかい光）、差分（差）、除外（除外）、色相（色相）、彩度（彩度）、色（色）、明度（明るさ）。

これらのパラメータの中国語は、Photoshop のブレンド モードに基づいて私が直接翻訳したものです (繁体字中国語ユーザーはここを参照してください)。各ブレンド モードのアルゴリズムとデモンストレーション効果もドラフト仕様に記載されています。時間の関係上、結果を一つ一つ検証することはしませんが、相違がある場合には、実際の結果が優先されます。 MDN には実践的なデモがあり、先ほど紹介した Web サイトにも実践的なデモが多数掲載されています。

もちろん、これらのブレンド モードは他の画像 (SVG など) にも適用できますが、これは完全にデザイナーとフロントエンド エンジニアの喧嘩を減らし、より誠実にするためだと思います (手を見せてください)。

参考資料

1. MDN関連ページ: 上記の他に、CSSアニメーションへの適用可否や互換性についても記載されています。
2. W3C 仕様: オリジナル仕様書

【たくさんのスキルを持っていても気負わないデザイナーだけが高給取り！ 】

1. グラフィックデザイン：『すごい！デザイナーの完全独学ガイド』
2. インタラクション デザイン: 『インタラクション デザイナー トレーニング ガイド!優れたインタラクション デザイナーになるためのゼロからの指導"
3. UI デザイン: "超実践的な初心者向けガイド!基礎ゼロで UI デザインを独学するにはどうすればよいですか? 》
4. フロントエンド開発：『天猫達人が教える！フロントエンド開発をゼロから体系的に学ぶにはどうすればよいですか? 》
5. 切り絵スキル：『初心者から上級者まで！ PHOTOSHOPで写真を切り抜く完全ガイド》
6. 配色：「素早く色合わせ！」カラー マッチングを完了するための 3 つの実践的な方法」
7. DPI ガイド: 「基本を学ぼう!デザイナー向け DPI ガイド』
8. インタラクションデザイン独学パスマップ: 『基礎ゼロから始める！非専攻学生のための自習パスマップ - インタラクションデザイン」

[Ushu.com オリジナル記事投稿メール: 2650232288@qq.com]