アダプティブフルスクリーンWebページ背景画像を実現するCSSを詳しく解説-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

アダプティブフルスクリーンWebページ背景画像を実現するCSSを詳しく解説

小云云

Feb 07, 2018 am 09:12 AM

css背景画像

この記事は主に、アダプティブな全画面 Web ページの背景画像を実現する CSS 手法に関する関連情報を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Web ページの背景適応型フルスクリーン .PNG

デザイナーは、Web ページに多くのポイントを追加することができますが、ページの背景に大きな画像を使用することは望ましくありません。解像度の異なる画像を表示する画像が変形する、画面が大きいときに背景が露出したくない、つまり、変形せずに画面サイズに適応できる大きな背景画像を実現することです。背景画像はスクロールバーでスクロールしません。

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>
<p class="wrapper">
    <!--背景图片-->
    <p id="web_bg" style="background-image: url(./img/bg.jpg);"></p>
    <!--其他代码 ... -->
</p>
</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;

この３つ文は p 全体を画面の上部と左に固定するためのものです

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

上記の最初の 2 つの文は、全画面効果を実現するために、 p 全体を画面と同じサイズにするためのものです。この実装では、画面幅が 1000 ピクセル以内の場合、p のサイズは変更されません。つまり、この場合、画面幅をスケーリングするときに、画像はスケーリングされません (1000 ピクセル内でのみ有効)。

z-index:-10;

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

background-repeat: no-repeat;

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

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

上記の3つの文は同じ意味で、画面サイズに同期して画像を拡大縮小するというものですが、一部の部分は同じである可能性があります以下の 2 つの文は、Chrome および Opera ブラウザとの互換性のためのものです。

background-position: center 0;

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

関連おすすめ:

CSS3チュートリアル(5):Webページ背景画像_css3_CSS_Webページ制作

Webページ背景画像を斜めに動かすJSメソッド_JavaScriptスキル

Webページ背景画像全画面設定_html/css_WEB -ITnose

以上がアダプティブフルスクリーンWebページ背景画像を実現するCSSを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

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を

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo

CSSカウンター：自動番号の包括的なガイドMay 07, 2025 pm 03:45 PM

csScounterSareSareusedTomageautomaticinginginwebdesigns.1）それらは、コンテンツ、リスト、および積極的なものを使用することができます

スクロール駆動型のアニメーションを使用したモダンなスクロールシャドウMay 07, 2025 am 10:34 AM

特にモバイルデバイスでは、スクロールシャドウを使用することは、Chrisが以前にカバーした微妙なUXです。 Geoffは、アニメーションタイムラインプロパティを使用する新しいアプローチをカバーしました。これがさらに別の方法です。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 中国語版

中国語版、とても使いやすい

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。