ホームページ > ウェブフロントエンド > htmlチュートリアル > 効率的な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:17
オリジナル
1468 人が閲覧しました

テクノロジーの新たな発展により、インターネットにアクセスできるコンピューターに加えて、タブレット、スマートフォン、スマート 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 class="container">

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

図 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 背景サイズ: カバー効果

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート