Ist es möglich, die Größe des Hintergrundbildes mit CSS einzustellen?
Ich möchte so etwas tun wie:
background: url('bg.gif') top repeat-y;
background-size: 490px;
Aber es scheint völlig falsch, es so zu machen ...
Antworten:
Wenn Sie das Bild vergrößern möchten, müssen Sie das Bild selbst in einem Bildeditor bearbeiten.
Wenn Sie das img-Tag verwenden, können Sie die Größe ändern. Dies führt jedoch nicht zum gewünschten Ergebnis, wenn das Bild als Hintergrund für andere Inhalte verwendet werden soll (und es sich nicht so wiederholt, wie Sie es zu wollen scheinen).
Dies ist in CSS3 mit möglich background-size.
Alle modernen Browser unterstützen dies. Wenn Sie also keine alten Browser unterstützen müssen, ist dies der richtige Weg.
Unterstützte Browser:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (Webkit 532) und Chrome 3.0+.
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}
Insbesondere mag ich die coverund containWerte, die uns neue Kontrollmöglichkeiten geben, die wir vorher nicht hatten.
Sie können auch background-size: roundeine Bedeutung in Kombination mit Wiederholung verwenden:
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}
Dadurch wird die Bildbreite so angepasst, dass sie mehrmals in den Hintergrundpositionierungsbereich passt.
Zusätzlicher Hinweis
Wenn die benötigte Größe die statische Pixelgröße ist, ist es immer noch sinnvoll, die Größe des tatsächlichen Bilds physisch zu ändern. Dies dient sowohl zur Verbesserung der Qualität der Größenänderung (vorausgesetzt, Ihre Bildsoftware leistet bessere Arbeit als die Browser) als auch zur Einsparung von Bandbreite, wenn das Originalbild größer ist als das, was angezeigt werden soll.
Nur CSS 3 unterstützt dies.
background-size: 200px 50px;Aber ich würde das Bild selbst bearbeiten, so dass der Benutzer weniger laden muss, und es könnte besser aussehen als ein geschrumpftes Bild ohne Antialiasing.
background: url('resized_image.png')\9;für IE lt 9
Wenn Ihre Benutzer nur Opera 9.5+, Safari 3+, Internet Explorer 9+ und Firefox 3.6+ verwenden, lautet die Antwort Ja. Ansonsten nein.
Die Eigenschaft für die Hintergrundgröße ist Teil von CSS 3, funktioniert jedoch in den meisten Browsern nicht.
Für Ihre Zwecke vergrößern Sie einfach das tatsächliche Bild.
Nicht möglich . Der Hintergrund ist immer so groß wie möglich, aber Sie können verhindern, dass er sich wiederholt background-repeat.
background-repeat: no-repeat;Zweitens wird der Hintergrund nicht in den Randbereich eines Felds verschoben. Wenn Sie also möchten, dass sich der Hintergrund nur auf dem tatsächlichen Inhalt eines Felds befindet, können Sie den Rand anstelle des Auffüllens verwenden.
Drittens können Sie steuern, wo das Hintergrundbild beginnt. Standardmäßig ist es die obere linke Ecke eines Felds, aber Sie können dies folgendermaßen steuern background-position:
background-position: center top;oder vielleicht
background-position: 20px -14px;Negative Positionierung wird häufig bei CSS-Sprites verwendet .
Es gibt ein vergessenes Argument:
background-size: contain;Dies wird Ihre nicht dehnen, background-imagewie es mit tun würde cover. Es würde sich dehnen, bis die längere Seite die Breite oder Höhe des Außenbehälters erreicht und somit das Bild erhalten bleibt.
Edit: Es gibt auch -webkit-background-sizeund -moz-background-size.
Die Eigenschaft für die Hintergrundgröße wird in IE9 +, Firefox 4+, Opera, Chrome und Safari 5+ unterstützt.
Zur Unterstützung der Antwort von @tetra möchte ich darauf hinweisen, dass eine Größenänderung des tatsächlichen Bildes nicht erforderlich ist, wenn es sich bei dem Bild um eine SVG handelt.
Da es sich bei einer SVG-Datei nur um XML handelt, können Sie angeben, welche Größe in XML angezeigt werden soll.
Wenn Sie jedoch dasselbe SVG-Bild an verschiedenen Orten verwenden und unterschiedliche Größen benötigen, ist die Verwendung background-sizesehr hilfreich. SVG-Dateien sind ohnehin von Natur aus kleiner als Rasterbilder, und die Größenänderung im laufenden Betrieb mit CSS kann sehr hilfreich sein, ohne dass mir Leistungskosten bekannt sind und ohne dass es zu Qualitätsverlusten kommt.
Hier ist ein kurzes Beispiel:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(Hinweis: Dies funktioniert für mich in OS X 10.7 mit Firefox 8, Safari 5.1 und Chrome 16.0.912.63.)
Mit CSS3 können Sie das voll und ganz:
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}Dadurch wird die Größe eines Hintergrundbilds auf 100% der Breite des Körperelements angepasst und der Hintergrund entsprechend angepasst, wenn das Körperelement für kleinere Auflösungen die Größe ändert.
Hier ist das Beispiel: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Haben Sie nur verschachtelte Divs, um browserübergreifend kompatibel zu sein
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Sie können zwei <div>Elemente verwenden:
Eines ist ein Container (es ist derjenige, auf dem das Hintergrundbild ursprünglich angezeigt werden sollte).
Der zweite ist in enthalten. Sie stellen die Größe auf die Größe des Hintergrundbilds (oder die Größe, die angezeigt werden soll) ein.
Das enthaltene div wird dann so eingestellt, dass es positioniert wird absolute. Auf diese Weise wird der normale Fluss von Elementen im enthaltenden Div nicht beeinträchtigt.
Damit können Sie Sprite-Bilder effizient verwenden.
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;Du hast geschrieben
background: url('bg.gif') top repeat-y;
background-size: 490px;Abhängig von der Größe des Containers wird jedoch nur der Hintergrund angezeigt.
Wenn Sie einen leeren Container mit der Hintergrund-URL und der Hintergrundgröße haben, wird das bg.gif nicht angezeigt.
Wenn Sie die Größe des Continers auf einstellen
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;In Kombination mit dem Code, den Sie oben geschrieben haben, können Sie die Datei bg.gif sehen.
Ich verwende Hintergrundbilder für Schaltflächen, aber es zeigt nur das Bild in der gleichen Größe wie der Text, selbst wenn ich Breite und Höhe einstelle. Stattdessen fülle ich meinen Text mit aus Zeichen auf (nicht unterbrechende Leerzeichen). Grundsätzlich klopfe ich so viele wie nötig ein, bis der gesamte Hintergrund der Schaltfläche angezeigt wird. Ich könnte also Code wie diesen haben:
Im Stylesheet:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}Im HTML-Dokument:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->Beispiel: Das
Hintergrundbild passt immer zur Containergröße (Breite 100% und Höhe 100px).
Browserübergreifendes CSS:
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;}}
Dies ist in CSS3 mit Hintergrundgröße möglich
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}Wenn Sie background-sizedieselbe backgroundEigenschaft festlegen möchten, können Sie Folgendes verwenden:
background:url(my-bg.png) no-repeat top center / 50px 50px;