CSSを使用して幅と高さが不明な要素に背景画像を追加する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSを使用して幅と高さが不明な要素に背景画像を追加する方法

高洛峰

Mar 23, 2017 am 11:19 AM

css

ページの特定の要素に背景画像を追加します。特定の幅と高さが指定されていない場合、効果は表示されません。

HTMLコード:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title></title>
    <style>
        *{margin:0; padding:0;}
        #wrap{
            width:100%;
            height:auto;
            background:url(&#39;images/page.jpg&#39;) no-repeat center center;
            background-size:cover;
        }
    </style>
</head>
<body>
    <div id="wrap">
    </div>
</body>
</html>

をご覧ください。ページ効果のスクリーンショット:

CSSを使用して幅と高さが不明な要素に背景画像を追加する方法さまざまな端末の画面サイズに適応させるために、幅と高さをハードコードすることはできません。では、どうすればよいでしょうか?次の方法を使用できます:

HTML コード:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title></title>
    <style>
        *{margin:0; padding:0;}
        #wrap{
            width:100%;
            height:100%;
            background:url(&#39;images/page-small.jpg&#39;) no-repeat;
            background-size:cover;
            position:fixed;
            z-index:-10;
            background-position:0 0;
        }
    </style>
</head>
<body>
    <div id="wrap">
    </div>
</body>
</html>

ページの効果を見てみましょう:

CSSを使用して幅と高さが不明な要素に背景画像を追加する方法モバイルページの効果

CSSを使用して幅と高さが不明な要素に背景画像を追加する方法注: div を削除し、スタイルを直接追加した場合本体、PC側ブラウザでは表示でき、Android端末でも表示できますが、Apple端末では表示できません。何度もテストを繰り返した結果、このバグは再現されました (この種の問題に対する正しい解決策を見つけた友人がいたら、ぜひアドバイスをお願いします!)

CSSを使用して幅と高さが不明な要素に背景画像を追加する方法 (上の写真は Apple モデルのスクリーンショットです)

2. img タグを通じて背景画像を追加します

HTML コード:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title></title>
    <style>
        *{margin:0; padding:0;}
    </style>
</head>
<body>
    <div id="wrap">
        <img class="imgBcground lazy"  src="/static/imghwm/default1.png"  data-src="images/page-small.jpg"    alt="">
    </div>
</body>
</html>

ページの効果をチェックすると、画像が 100% の実際のサイズで表示されていることがわかりました。これは明らかに私たちが望んでいる効果ではありません

CSSを使用して幅と高さが不明な要素に背景画像を追加する方法上記の例とよく似ていますが、少しだけ追加する必要があります。変更するだけです

HTML コード:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title></title>
    <style>
        *{margin:0; padding:0;}
        .imgBcground{
            display:block;
            width:100%;
            height:100%;
            position:fixed;
            z-index:-10;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <img class="imgBcground lazy"  src="/static/imghwm/default1.png"  data-src="images/page-small.jpg"    alt="">
    </div>
</body>
</html>

さまざまなシミュレーションモデルでページ効果を表示できます:

CSSを使用して幅と高さが不明な要素に背景画像を追加する方法