CSS背景画像を適応させる方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS背景画像を適応させる方法

anonymity

May 28, 2019 pm 03:06 PM

css

クリアで美しい背景画像は、Web ページに多くのポイントを追加できます。デザイナーはページの背景に大きな画像を使用することがよくあります。解像度の違いによって画像が変形することは望ましくありません。この場合、背景に白い部分がありますが、これは簡単に言えば、変形せずに画面サイズに適応できる大きな背景画像を実現することであり、背景画像はスクロールしません。スクロールバーがスクロールするので、背景画像を調整できます。

CSS背景画像を適応させる方法

CSS を使用してこれを行う方法は次のとおりです:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
</head>
<body>
<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... -->
</div>
</body>
</html>

CSS:

#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

次に、CSS の各コードの機能を分析してみましょう:

 position:fixed;  top: 0;  left: 0;

これらの 3 つの文により、div 全体が画面の上部と左に固定されます

 width:100%;  height:100%;  min-width: 1000px;

上の最初の 2 つの文フルスクリーン効果を達成するために、div 全体を画面と同じサイズにすることです。min-width は、画面幅が 1000 ピクセル以内の場合に div のサイズを変更しないようにします。つまり、この例では次に、画面幅を拡大縮小すると、画像は拡大縮小されません（1000px以内のみ有効）。

 z-index:-10;

この目的は、HTML ページの各レベルの下に div 全体を作成することです。通常の状況では、最初に作成されたレベルの z-index 値は 0 なので、ここに -1 を書くと、実装ではありますが、ここで -10 を記述するのは、ページ内のレベルが多すぎると、必ずしも -1 が最下位にあるとは限らないため、div 全体が最下位になるようにするためです。 -100 のような大きな数値で書かれている場合。背景画像のように見えるものを実現するには、index:-10 を使用します。実際には最も普通の div ですが、階層関係が変更され、背景画像のように見えます。

 background-repeat: no-repeat;

上記は背景です、繰り返さないでください

 background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

上の 3 つの文は同じ意味で、画面サイズに合わせて画像を拡大縮小するというものですが、一部の部分が異なります。は切り取られる可能性がありますが、公開されません。次の 2 つの文は、Chrome ブラウザと Opera ブラウザとの互換性を考慮したものです。

 background-position: center 0;

上の文は、画像の位置を中央揃え、左揃えという意味です。

以上がCSS背景画像を適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

@KeyFrames対CSSトランジション：違いは何ですか？May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity：@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。

静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM

私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆

HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AM

CSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを