ホームページ > 記事 > ウェブフロントエンド > 効率的なCSS開発の実践：CSS 3、LESS、SASS、Bootstrap、Foundation 読書メモ(1) 背景の設定 image_html/css_WEB-ITnose
効率的なCSS開発の実践：CSS 3、LESS、SASS、Bootstrap、Foundation 読書メモ(1) 背景の設定 image_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:53:171378ブラウズ
テクノロジーの新たな発展により、インターネットにアクセスできるコンピューターに加えて、タブレット、スマートフォン、スマート 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 を設定します。
<スタイル >
| 背景:url(naicha.jpg) 繰り返しなし; マージン: 自動; 高さ: 300 ピクセル; }
< div class="container">
背景は背景画像のサイズに依存するため、実際には元の画像の左上隅のみが表示されます。
図 5.1 元の画像の背景 次に、background-size を追加します。その効果は図 5.2 に示されています。
注: 背景サイズは画像を指定した後に設定する必要があります。そうしないと有効になりません。 最後に、この本の表紙の写真を学びに興味のある人たちと共有しましょう
声明： この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。 |