効率的なCSS開発の実践：CSS 3、LESS、SASS、Bootstrap、Foundation 読書メモ(4) より柔軟なサイズで背景を構築する_html/css_WEB-ITnose

従来の画像の背景と比較して、CSS を使用して背景色を構築すると、ネットワーク送信のオーバーヘッドを削減できるだけでなく、サイズを制御できるため、開発者にも好まれています。

たとえば、デザイナーは図 5.18 に示すように、タイトル背景として背景画像をデザインします。パソコンを使ってWebページを閲覧するユーザーにとって、基本的にタイトルの改行はなく、レイアウトも基本的に固定幅なので、デザイナーが指定した背景画像をそのまま使用するだけで済みます。ただし、このページは主に携帯電話で表示されます。タイトルは長さに応じて 1 行または 3 行になるため、状況に応じて異なる背景画像を配置する必要があります。

図 5.18 デザイナーが指定した背景

幸いなことに、この背景画像は実際には、濃い紫青から明るい青、そして濃い青へと左から右にグラデーションになっているので、それを直接使用してください。スタイルを定義するだけです。複数の色の値の線形グラデーション:

.header{  background-image:-webkit-linear-gradient(left,#241a38,#012c57,#031a40); background-image: -o-linear-gradient(left,#241a38,#012c57,#031a40); background-image: -moz-linear-gradient(left,#241a38,#012c57,#031a40); background-image: linear-gradient(left,#241a38,#012c57,#031a40);}

CSS ソリューションを使用して画像を置き換えます。 タイトルが折り返されている場合、タイトル領域は自動的に拡張されます。行数に関係なく、非常に優れた柔軟性を備えており、実装の複雑さが大幅に軽減され、画像の読み込みによって発生するネットワーク トラフィックも節約できるため、一石二鳥と言えます。

学びたい方は一緒にコミュニケーションしましょう