Rozciągaj i skaluj obraz CSS w tle - tylko za pomocą CSS

Chcę, aby mój obraz tła rozciągał się i skalował w zależności od rozmiaru rzutni przeglądarki.

I've seen some pytania na Stack Overflow, które wykonują pracę, jak Stretch and scale CSS background na przykład. Działa to dobrze, ale chcę umieścić obraz za pomocą background, a nie za pomocą tagu img.

W tym jednym znacznik img jest umieszczony, a następnie za pomocą CSS dodajemy trybut do znacznika img.

width:100%; height:100%;

To działa, ale to pytanie jest trochę stare i stwierdza, że w CSS 3 zmiana rozmiaru obrazu tła będzie działać całkiem dobrze. I've próbował tego przykład pierwszy, ale to nie'sprawdziło się dla mnie.

Czy istnieje dobra metoda, aby zrobić to za pomocą deklaracji background-image?

Community
Edytowane pytanie 23. maja 2017 в 12:26
Programowanie
background css
19. lipca 2009 в 3:51
37 opinie

Używając kodu, o którym wspomniałem...

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%;
}

To daje pożądany efekt: tylko zawartość będzie przewijana, a nie tło.

Obraz tła zmienia rozmiar do rzutni przeglądarki dla każdego rozmiaru ekranu. Gdy zawartość nie mieści się w rzutni przeglądarki, a użytkownik musi przewinąć stronę, obraz tła pozostaje nieruchomy w rzutni, podczas gdy zawartość jest przewijana.

Z CSS 3 wydaje się, że byłoby to o wiele łatwiejsze.

Community
Edytowana odpowiedź 23. maja 2017 в 12:26
Komentarze (5)

W rzeczywistości możesz osiągnąć ten sam efekt jako obraz tła za pomocą tagu img. Musisz tylko ustawić jego z-index niżej niż wszystko inne, ustawić position:absolute i użyć przezroczystego tła dla każdego pudełka na pierwszym planie.

Komentarze (4)

Czy chcesz to osiągnąć używając tylko jednego obrazu? Bo tak naprawdę możesz zrobić coś podobnego do rozciągającego się tła używając dwóch obrazów. Na przykład PNG obrazów.

Robiłem to już wcześniej i nie jest to wcale takie trudne. Poza tym myślę, że rozciąganie po prostu zaszkodziłoby jakości tła. A jeśli dodasz duży obrazek, spowolni to pracę wolnych komputerów i przeglądarek.

Peter Mortensen
Edytowana odpowiedź 30. września 2012 в 3:51
Komentarze (3)