So fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu-CSS-Tutorial-php.cn

So fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu

高洛峰

Freigeben： 2017-03-23 11:19:03

Original

2147 Leute haben es durchsucht

Ein Hintergrundbild zu einem bestimmten Element der Seite hinzufügen. Wenn die spezifische Breite und Höhe nicht angegeben ist, kann der Effekt nicht angezeigt werden.

Ein Hintergrundbild hinzufügen

HTML-Code :

<!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>

Nach dem Login kopieren

Wir können uns den Screenshot des Seiteneffekts ansehen:

So fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu

Um uns an die Bildschirmgröße verschiedener Endgeräte anzupassen, Wir können die Breite und Höhe nicht fest codieren. Was sollen wir also tun? Sie können die folgenden Methoden verwenden:

HTML-Code:

<!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>

Nach dem Login kopieren

Schauen wir uns den Seiteneffekt an:

So fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu

Mobile Seiteneffekt

So fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu

Hinweis: Wenn Sie das Div entfernen und den Stil direkt zum Text hinzufügen, kann er auf PC-Browsern und Android-Telefonen angezeigt werden, jedoch nicht auf Apple-Telefone. Nach vielen wiederholten Tests wurde dieser Fehler reproduziert (falls Freunde auf die richtige Lösung für ein solches Problem stoßen, können sie uns gerne Ratschläge geben!)

So fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu

(Das Bild oben ist für ein Apple-Modell) Screenshot)

2. Fügen Sie ein Hintergrundbild über das img-Tag hinzu

HTML-Code:

<!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" src="images/page-small.jpg" alt="">
    </div>
</body>
</html>

Nach dem Login kopieren

Beim Betrachten des Seiteneffekts haben wir festgestellt dass das Bild in 100 % Originalgröße dargestellt wird.

So fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu

Es ist dem obigen Beispiel sehr ähnlich, wir müssen es nur leicht modifizieren

HTML-Code:

<!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" src="images/page-small.jpg" alt="">
    </div>
</body>
</html>

Nach dem Login kopieren

Der Seiteneffekt kann unter verschiedenen Simulationsmodellen angezeigt werden:

So fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu

Über die Hintergrundgröße Attribut, W3C definiert es so

Das obige ist der detaillierte Inhalt vonSo fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!