効率的なCSS開発の実践：CSS 3、LESS、SASS、Bootstrap、Foundation 読書メモ(1) 背景の設定 image_html/css

テクノロジーの新たな発展により、インターネットにアクセスできるコンピューターに加えて、タブレット、スマートフォン、スマート TV などの他のデバイスもインターネットにアクセスできるようになりました。マルチデバイスの時代において、マルチスクリーンエクスペリエンスを構築することは、思っているほど難しくありません。しかし、これは CSS の学習をさらに困難にするのではないでしょうか?始め方が分からず、基本的な CSS 構文を少ししか知らないのですが、モバイルインターネットの時代では、時代遅れなのでしょうか? ?しっかり勉強して、『CSS 効率的な開発実践: CSS 3、LESS、SASS、Bootstrap、Foundation』を読んで、あなたの将来を元気づけましょう!

5.1 背景画像のサイズを設定する

CSS 3 が登場する前は、背景画像のサイズは画像の実際のサイズによって決まりました。同じ画像を複数の異なる場所で背景として使用する場合、描画ツールを使用して画像を異なるサイズに作成する必要があるため、開発者の作業負荷が増大する一方で、より多くのディスク領域とサイバースペースが必要になります。 CSS 3 では、開発者は、background-size 属性を使用して背景画像のサイズを指定できるため、背景画像をさまざまな環境で再利用できます。たとえば、次のコード:

di v{

背景:url(img_flwr.gif);

背景- size: 80px 60px;

background-repeat:no-repeat;

もちろん、長さの単位またはパーセンテージを直接使用してサイズを指定します。背景。最初の値は幅、2 番目の値は高さです。値が 1 つだけ設定されている場合、高さはデフォルトで auto になります。

背景サイズには、カバーと含めるという 2 つのオプションもあります。どちらのオプションを選択しても、画像の縦横比は歪みません。 Cover は、幅が要素の幅と等しく、高さが auto に設定されている場合と同等であり、contain は、高さが要素の高さと等しく、幅が auto に設定されている場合と同等です。例を示します。

まず、高さと幅が 300 ピクセルのコンテナを設定し、次に 1600 を設定します。

<スタイル >

.container{

背景:url(naicha.jpg) 繰り返しなし;

マージン: 自動;

高さ: 300 ピクセル;

}

< div class="container">

背景は背景画像のサイズに依存するため、実際には元の画像の左上隅のみが表示されます。

図 5.1 元の画像の背景

次に、background-size を追加します。その効果は図 5.2 に示されています。

図 5.2 背景サイズ: 含む効果