Heim > Artikel > Web-Frontend > So fügen Sie mithilfe von CSS ein Hintergrundbild zu einem Element unbekannter Breite und Höhe hinzu

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

高洛峰Original: 2017-03-23 11:19:032146Durchsuche

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>

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>

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ein Beispiel für das Hinzufügen eines Milchglas-Unschärfeeffekts zu einem Bild mithilfe des CSS3-FilterattributsNächster Artikel：Ein Beispiel für das Hinzufügen eines Milchglas-Unschärfeeffekts zu einem Bild mithilfe des CSS3-Filterattributs

In Verbindung stehende Artikel

Mehr sehen