テクノロジーの新たな発展により、インターネットにアクセスできるコンピューターに加えて、タブレット、スマートフォン、スマート 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"> div >
背景は背景画像のサイズに依存するため、実際には元の画像の左上隅のみが表示されます。
図 5.1 元の画像の背景 次に、background-size を追加します。その効果は図 5.2 に示されています。
注: 背景サイズは画像を指定した後に設定する必要があります。そうしないと有効になりません。 最後に、この本の表紙の写真を学びに興味のある人たちと共有しましょう
ソース:php.cn
前の記事:CSS_html/css_WEB-ITnose で中央揃えを実現する 7 つの方法
次の記事:html テーブル全体が上下左右に中央に配置され、左右にのみ移動できます。データベースに接続せずにログインインターフェイスを作成したいのですが、_html/css_WEB-ITnose を教えてください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません
Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2190
Google Chromeのモバイル版を表示する方法
こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2340
親ウィンドウには出力がありません
document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1849
関連トピック
詳細>
|