Roztiahnutie a zmenšenie obrázka CSS na pozadí - iba pomocou CSS

Chcem, aby sa môj obrázok na pozadí roztiahol a zmenšil v závislosti od veľkosti zobrazenia prehliadača.

Videl som nejaké otázky na Stack Overflow, ktoré robia túto prácu, ako napríklad Stretch and scale CSS background. Funguje to dobre, ale ja chcem obrázok umiestniť pomocou značky background, nie pomocou značky img.

V tom je umiestnený tag img a potom pomocou CSS vzdáme hold tagu img.

width:100%; height:100%;

Funguje to, ale táto otázka je trochu stará a uvádza, že v CSS 3 bude zmena veľkosti obrázka na pozadí fungovať celkom dobre. Ja'som to skúšal príklad prvý, ale nefungovalo mi to.

Existuje nejaká dobrá metóda, ako to urobiť pomocou deklarácie background-image?

Community
Edited question 23 máj 2017 в 12:26
Programovanie
background css
19 júl 2009 в 3:51
33 zobrazenia

Použitie kódu, ktorý som uviedol...

HTML

<div id="background">

</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

Tým sa dosiahne požadovaný efekt: posúvať sa bude len obsah, nie pozadie.

Obrázok na pozadí sa prispôsobí zobrazovacej ploche prehliadača pre akúkoľvek veľkosť obrazovky. Keď sa obsah nezmestí do zobrazovacej plochy prehliadača a používateľ potrebuje posúvať stránku, obrázok na pozadí zostane fixovaný v zobrazovacej ploche, zatiaľ čo obsah sa posúva.

Zdá sa, že s CSS 3 by to bolo oveľa jednoduchšie.

Community
Edited answer 23 máj 2017 в 12:26
Komentáre (5)

Rovnaký efekt ako obrázok na pozadí môžete dosiahnuť pomocou značky img. Musíte len nastaviť jeho z-index nižšie ako všetko ostatné, nastaviť position:absolute a použiť priehľadné pozadie pre každé pole v popredí.

Komentáre (4)

Chcete to dosiahnuť len pomocou jedného obrázka? Pretože v skutočnosti môžete vytvoriť niečo podobné ako rozťahovacie pozadie pomocou dvoch obrázkov. Napríklad obrázky PNG.

Už som to robil a nie je to až také ťažké. Okrem toho si myslím, že rozťahovanie by len poškodilo kvalitu pozadia. A ak by ste pridali obrovský obrázok, spomalilo by to pomalé počítače a prehliadače.

Peter Mortensen
Edited answer 30 september 2012 в 3:51
Komentáre (3)