Hintergrundbilder: So füllen Sie das gesamte Div, wenn das Bild klein ist und umgekehrt

77

Ich habe drei Probleme:

  1. Als ich versuchte, ein Hintergrundbild in einem Div mit kleinerer Größe zu verwenden, zeigt das Div nur einen Teil des Bildes. Wie kann ich das vollständige oder einen bestimmten Teil des Bildes anzeigen?

  2. Ich habe ein kleineres Bild und möchte es in einem größeren Div verwenden. Aber ich möchte die Wiederholungsfunktion nicht verwenden.

  3. Gibt es in CSS eine Möglichkeit, die Deckkraft eines Bildes zu manipulieren?

css background-image opacity Aakash Sahai
quelle

Antworten:

124

Passen Sie die Größe des Bildes an die Div-Größe an.
Mit CSS3 können Sie dies tun:

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

Wie strecken Sie ein Hintergrundbild auf einer Webseite :

Über die Deckkraft 

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Oder schauen Sie sich CSS Image Opacity / Transparency an

Yossi
quelle
aber dies wird Belastung über Server erstellen Sie mehrere Bilder zu laden (die ähnlich ist, wie v know) .. so stattdessen mehrere Bilder verwenden, mit einem Bild und strechg n collasping ist eine bessere way..but dnt wissen , wie man es ..
Aakash Sahai
Punkt 1 und 2 sind keine Lösungen für dieses Problem. Der erste Punkt dient dazu, das Seitenverhältnis auf einem Bild beizubehalten, der zweite Punkt scheint überhaupt nicht zu funktionieren. Mit CSS3 wird die Hintergrundgröße Eigenschaft dieses Problem beheben, bis dahin müssen Sie bei einem Hack bleiben, denke ich ..
Sondre
IE unterstützt dies nicht (BG-Größe). Was zu tun?
KarSho
82

Verwenden Sie Folgendes, um das Bild automatisch zu vergrößern und den gesamten Div-Bereich abzudecken, ohne dass ein Teil davon ausgefüllt wird:

background-size: cover;
Ouadie
quelle
2
Kleinster Kommentar auf dieser Seite und größter Vorteil in meinem Fall. Vielen Dank
Ruslan Abuzant
1
funktioniert bei mir nicht, aber mein div befindet sich in einem <th> in einem <tr> in einer <table>. Ich weiß nicht, ob das der Grund ist
user1709076
Könnten Sie bitte eine jsfiddle für Ihr Beispiel erstellen? so können wir Ihnen helfen
Ouadie
22

Das hat bei mir perfekt funktioniert

background-repeat: no-repeat;
background-size: 100% 100%;
Dnyaneshwar Harer
quelle
Dieses Bild passt sowohl in die Breite als auch in die Höhe des Hintergrundbilds, genau das, was benötigt wird.
Boris Gafurov
9

Versuchen Sie es unter dem Codesegment, ich habe es selbst schon einmal versucht:

#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}
Behnia Esmailian
quelle
Willkommen bei Stack Overflow! Obwohl diese Antwort wahrscheinlich richtig und nützlich ist, wird es bevorzugt, wenn Sie eine Erklärung hinzufügen, um zu erklären, wie sie zur Lösung des Problems beiträgt. Dies ist besonders in Zukunft nützlich, wenn eine Änderung (möglicherweise ohne Bezug) dazu führt, dass sie nicht mehr funktioniert und die Benutzer verstehen müssen, wie sie einmal funktioniert hat.
Kevin Brown
6

Dies wird wie ein Zauber funktionieren.

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;
Jayanta Biswas
quelle
Vielen Dank. Habe speziell danach gesucht. Hab es vor Jahren gemacht und vergessen.
Alex Rogachevsky
enthalten deckt nicht ganze div ab. Cover scheint also das zu sein, wonach op sucht.
Webs
0

  1. Ich stimme Yossis Beispiel zu, strecke das Bild so, dass es zum Div passt, aber auf eine etwas andere Weise (ohne Hintergrundbild, da dies in CSS 2.1 ein wenig unflexibel ist). Vollbild anzeigen:

    <div id="yourdiv">
    <img id="theimage" src="image.jpg" alt="" />
</div>

#yourdiv img {
    width:100%;
  /*height will be automatic to remain aspect ratio*/
}

  2. Zeigen Sie einen Teil des Bildes mit der Hintergrundposition:

    #yourdiv 
{
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: 10px 25px;
}

  3. Wie im ersten Teil von (1) wird das Bild auf das Div skaliert, sodass beide größer oder kleiner funktionieren

  4. Gleich wie bei Yossi.

Bazzz
quelle
äh, die Formatierung meines Beitrags hat nicht funktioniert? Ich habe das Symbolleistensymbol verwendet ... :(
Bazzz
Ich habe es früher versucht und jetzt auch. Wenn die Bildgröße 100px 100px ist und div 400px 400px groß ist, dann ist es in der oberen Ecke fixiert. Es funktioniert nicht. Safari neuesten Browser
Aakash Sahai
Hier ist ein Beispiel: jsfiddle.net/9mawE/1 Das div ist 150px breit. Das Google-Logo ist mehr als 150 Pixel breit, wird jedoch verkleinert, um in das Div zu passen. Das Google Earth-Symbol ist weniger als 150 Pixel breit und wird so skaliert, dass es zum 150 Pixel breiten Div passt. Die Hintergrundgröße funktioniert in IE 8 nicht, da CSS 3 immer noch nicht unterstützt wird.
Bazzz