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

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

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

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

1 2 3 4 5

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 >

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

図 5.1 元の画像の背景

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13

.container{ 背景:url(naicha.jpg) no-repeat; 背景サイズ: 100% 自動;含む; :300px; 高さ:300px; スタイル > これで、幅がコンテナの幅と同じになり、高さが元の画像の比率に従って生成されることがわかります。最後に、元の画像と同じ比率の背景画像が表示されます。を使用すると、background-size: 100 % auto; を使用することと同じになります。 コンテナの高さ全体を占める場合は、background-size: auto 100%; または、background-size: cover; を設定するだけです。その効果を図 5.3 に示します。

図 5.3 背景サイズ: カバー効果

注: 背景サイズは画像を指定した後に設定する必要があります。そうしないと有効になりません。

最後に、この本の表紙の写真を学びに興味のある人たちと共有しましょう