Există o modalitate de a obține un fundal în CSS pentru a întinde sau scară pentru a umple recipientul său?
Utilizați CSS 3 proprietatea background-size`:
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
Acesta este disponibil pentru browserele moderne, din 2012.
Pentru browserele moderne, puteți realiza acest lucru prin utilizarea background-size
:
body {
background-image: url(bg.jpg);
background-size: cover;
}
"acoperi" înseamnă a întinde imaginea, fie vertical sau orizontal, astfel încât să nu gresie/repetă.
Care ar lucra pentru Safari 3 (sau mai târziu), Chrome, Mozilla 10+, Firefox 3.6+, și Internet Explorer 9 (sau mai târziu).
Pentru a funcționa cu mai verions de Internet Explorer, încercați aceste CSS:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Scalarea unei imagini cu CSS nu este destul de posibil, dar un efect similar poate fi realizat în modul următor, totuși.
Utilizați această marcare:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
cu următoarele CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
și ar trebui să fie făcut!
În scopul de a scala imaginea pentru a fi "full bleed" și de a menține raportul de aspect, puteți face acest lucru în loc:
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
Acesta funcționează destul de bine! Dacă un parametru este decupată, cu toate acestea, acesta va fi decupată doar pe o parte a imaginii, mai degrabă decât să fie uniform decupate pe ambele părți (și centrat). Am'am testat-o în Firefox, Webkit, și Internet Explorer 8.
Utilizați de fundal-dimensiunea atribut în CSS3:
.class {
background-image: url(bg.gif);
background-size: 100%;
}
EDIT: Modernizr susține detectare de fundal-dimensiune suport. Puteți utiliza un JavaScript soluție scrise să lucreze cu toate acestea aveți nevoie de ea și încărcați-l în mod dinamic atunci când nu există nici un suport. Acest lucru va menține codul întreținut fără a recurge la intruzive CSS hacks pentru anumite browsere.
Personal, am folosi un script pentru a face față cu ea folosind jQuery, sa o adaptare a imgsizer. Ca cele mai multe modele fac eu acum folosesc lățime %'s pentru lichid de machete pe dispozitive există o ușoară adaptare la una dintre bucle (reprezentând dimensiuni, care sunt't întotdeauna de 100%):
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
EDIT: Ați putea fi, de asemenea, interesat în jQuery CSS3 Finaliz[s]e.
Încercați articolul background-size. Dacă utilizați toate caracteristicile următoare, se va lucra în cele mai multe browsere, cu excepția Internet Explorer.
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
.style1 {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Funcționează în:
În plus, puteți încerca acest lucru pentru o anume soluție
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;
Credit pentru acest articol de Chris Coyier http://css-tricks.com/perfect-full-page-background-image/
Acest lucru utilizate pentru a fi adevărat în 2008, atunci când răspunsul a fost scris. Astăzi browserele moderne, suport de fundal-dimensiunea care rezolvă această problemă. Feriți-vă că IE8 nu't-l sprijine.
Defini "întinde și la scară"...
Daca'am primit un format bitmap, l's, în general, nu mare (grafic vorbind) să se întindă și să-mi zici. Puteți utiliza modele repetabile pentru a da iluzia de același efect. De exemplu, dacă aveți un gradient care devine mai usor spre partea de jos a paginii, atunci ar trebui să utilizați un grafic care's un singur pixel lățime și aceeași înălțime ca și container (sau, de preferat mai mari, pentru a considerare pentru scalare) și apoi țiglă pe pagina. De asemenea, dacă gradientul fugit pe pagina, ar fi un pixel mare și mai larg decât container și repetate în jos a paginii.
În mod normal, pentru a da iluzia de a se întinde pentru a umple recipientul atunci când recipientul creste sau se micsoreaza, a face imaginea mai mare decât recipientul. Orice suprapunere nu vor fi afișate în afara limitelor de container.
Dacă doriți un efect care se bazează pe ceva ca o cutie cu margini curbate, atunci s-ar lipi partea stângă a caseta din partea stângă a recipientului cu destul de suprapunere care (în termen de motiv) nu contează cât de mare container, niciodată nu se termină de fundal și apoi strat o imagine din partea dreaptă a casetei cu margini curbate și poziția pe dreapta a containerului. Astfel ca recipientul se micsoreaza sau creste, curbat cutie efect pare să scadă sau să crească cu ea - nu't de fapt, dar dă iluzia că este ce's-a întâmplat.
Ca pentru a face într-adevăr imaginea psihiatru și să crească cu container, va trebui să utilizați unele stratificare trucuri pentru a face imaginea pare să funcționeze ca un fundal și un javascript pentru a redimensiona cu container. Nu's nici o modalitate de a face acest lucru cu CSS...
Daca're folosind grafică vectorială, ai're în afara domeniul meu de expertiza I'm tem.
Aceasta este ceea ce am'am făcut din ea. În întindere de clasă, pur și simplu am schimbat înălțimea la "auto". În acest fel imaginea de fundal are mereu aceeași dimensiune ca lățimea ecranului și înălțimea va avea intotdeauna marimea potrivita.
#background {
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Un sfat suplimentar pentru SolidSmile's ieftin este la scară (proporțională re-dimensionare) prin stabilirea unui lățimea și utilizarea auto pentru înălțime.
Ex:
#background {
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}