È possibile impostare la dimensione dell'immagine di sfondo con CSS?
Voglio fare qualcosa del tipo:
background: url('bg.gif') top repeat-y;
background-size: 490px;Ma sembra assolutamente sbagliato farlo in quel modo ...
Risposte:
Se è necessario ingrandire l'immagine, è necessario modificare l'immagine stessa in un editor di immagini.
Se usi il tag img, puoi cambiare la dimensione, ma ciò non ti darebbe il risultato desiderato se hai bisogno che l'immagine sia in background per qualche altro contenuto (e non si ripeterà come sembra che tu voglia) ...
Questo è possibile farlo in CSS3 con background-size.
Tutti i browser moderni supportano questo, quindi a meno che non sia necessario supportare i browser precedenti, questo è il modo di farlo.
Browser supportati:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) e 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;
}In particolare, mi piacciono i valori covere containche ci danno un nuovo potere di controllo che non avevamo prima.
Puoi anche usare background-size: roundun significato associato a ripetizione:
.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;
}Ciò regolerà la larghezza dell'immagine in modo che si adatti un numero intero di volte nell'area di posizionamento dello sfondo.
Nota aggiuntiva
Se la dimensione richiesta è di pixel statici, è comunque intelligente ridimensionare fisicamente l'immagine reale. Questo è sia per migliorare la qualità del ridimensionamento (dato che il software di immagine fa un lavoro migliore rispetto ai browser), sia per risparmiare larghezza di banda se l'immagine originale è più grande di quanto visualizzare.
Solo CSS 3 lo supporta,
background-size: 200px 50px;Ma modificherei l'immagine stessa, in modo che l'utente debba caricare meno, e potrebbe apparire migliore di un'immagine rimpicciolita senza antialiasing.
background: url('resized_image.png')\9;
Se i tuoi utenti utilizzano solo Opera 9.5+, Safari 3+, Internet Explorer 9+ e Firefox 3.6+, la risposta è sì. Altrimenti no.
La proprietà di dimensioni dello sfondo fa parte di CSS 3, ma non funzionerà sulla maggior parte dei browser.
Per i tuoi scopi basta ingrandire l'immagine reale.
Non è possibile . Lo sfondo sarà sempre più grande che può essere, ma puoi impedire che si ripeta background-repeat.
background-repeat: no-repeat;In secondo luogo, lo sfondo non va nell'area del margine di un riquadro, quindi se si desidera che lo sfondo si trovi solo sul contenuto effettivo di un riquadro, è possibile utilizzare il margine anziché il riempimento.
In terzo luogo, puoi controllare dove inizia l'immagine di sfondo. Di default è l'angolo in alto a sinistra di una scatola, ma puoi controllarlo con background-position, in questo modo:
background-position: center top;o forse
background-position: 20px -14px;Il posizionamento negativo viene utilizzato molto con gli sprite CSS .
C'è un argomento dimenticato :
background-size: contain;Questo non allungherà il tuo background-imagecome farebbe con cover. Si allungherebbe fino a quando il lato più lungo raggiunge la larghezza o l'altezza del contenitore esterno e quindi preserva l'immagine.
Modifica: c'è anche -webkit-background-sizee -moz-background-size.
La proprietà delle dimensioni dello sfondo è supportata in IE9 +, Firefox 4+, Opera, Chrome e Safari 5+.
A sostegno della risposta che @tetra ha dato, voglio sottolineare che se l'immagine è un SVG, non è necessario ridimensionare l'immagine reale.
Poiché un file SVG è solo XML, puoi specificare qualsiasi dimensione desideri che appaia all'interno dell'XML.
Tuttavia, se stai usando la stessa immagine SVG in luoghi diversi e hai bisogno che abbia dimensioni diverse, allora usare background-sizeè molto utile. I file SVG sono intrinsecamente più piccoli delle immagini raster e il ridimensionamento al volo con CSS può essere molto utile senza alcun costo delle prestazioni di cui sono a conoscenza, e certamente poca o nessuna perdita di qualità.
Ecco un breve esempio:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(Nota: questo funziona per me in OS X 10.7 con Firefox 8, Safari 5.1 e Chrome 16.0.912.63)
Con CSS3 puoi totalmente:
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;
}Questo ridimensionerà un'immagine di sfondo al 100% della larghezza dell'elemento body e ridimensionerà di conseguenza lo sfondo di conseguenza quando l'elemento body si ridimensiona per risoluzioni più piccole.
Ecco l'esempio: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Basta avere div annidati per essere compatibili con più browser
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Puoi usare due <div>elementi:
Uno è un contenitore (è quello in cui inizialmente si voleva far apparire l'immagine di sfondo).
Il secondo è contenuto all'interno. Puoi impostarne la dimensione sulla dimensione dell'immagine di sfondo (o sulla dimensione che desideri che appaia).
Il div contenuto viene quindi impostato per essere posizionato absolute. In questo modo non interferisce con il normale flusso di oggetti nel div contenente.
Ti consente di utilizzare le immagini sprite in modo efficiente.
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;Hai scritto
background: url('bg.gif') top repeat-y;
background-size: 490px;ma vedrai solo lo sfondo in base alla dimensione del contenitore.
se hai un contenitore vuoto con l'URL di sfondo e qualunque sia la dimensione dello sfondo, non vedrai bg.gif.
Se si imposta la dimensione del continer su
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;combinato con il codice che hai scritto sopra, sarai in grado di vedere il file bg.gif.
Uso le immagini di sfondo per i pulsanti, ma mostra solo le stesse dimensioni del testo, anche se imposto larghezza e altezza. Invece, compilo il mio testo con caratteri (spazi non interrompibili). Schiaffo in quante ne ho bisogno, in pratica, fino a quando appare tutto lo sfondo del pulsante. Quindi potrei avere un codice come questo:
Nel foglio di stile:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}Nel documento HTML:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->Ad esempio: l'
immagine di sfondo si adatterà sempre alle dimensioni del contenitore (larghezza 100% e altezza 100px).
CSS cross-browser:
.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;}
Questo è possibile farlo in CSS3 con dimensioni di sfondo
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}Se si desidera impostare background-sizenella stessa backgroundproprietà è possibile utilizzare utilizzare:
background:url(my-bg.png) no-repeat top center / 50px 50px;