Pozycjonowanie wielu obrazów tła

Question

Mam trzy obrazy tła, wszystkie o szerokości 643 piksele. Chcę, żeby być określone w taki sposób:

• top obraz (wysokość 12px) no-repeat

• środkowy obraz repeat-y

• dolny obraz (wysokość 12 pikseli) bez powtórzeń

Nie widziałem, żeby to zrobić bez nakładania się na siebie (co jest problemem, ponieważ obrazy są częściowo przezroczyste), czy coś takiego jest możliwe?

background-image: url(top.png), 
        url(bottom.png), 
        url(middle.png); 

background-repeat: no-repeat, 
        no-repeat, 
        repeat-y; 

background-position: left 0 top -12px, 
        left 0 bottom -12px, 
        left 0 top 0; 

Answer 1

Twoim problemem jest to, że repeat-y wypełni całą wysokość, bez względu na to, gdzie początkowo ją umieścisz. W ten sposób pokrywa się z góry i na dole.

Jednym z rozwiązań jest przesunięcie powtarzającego się tła do pseudo elementu umieszczonego poza kontenerem za pomocą 12px u góry iu dołu. The result can be seen here (przezroczystość w wersji demonstracyjnej ma pokazać, że nie ma nakładania się). Bez nieprzezroczystości, see here. Odpowiedni kod (testowane w przeglądarkach CSS3: IE9, FF, Chrome):

CSS

div { 
    position: relative; 
    z-index: 2; 
    background: url(top.png) top left no-repeat, 
       url(bottom.png) bottom left no-repeat; 
} 

div:before { 
    content: ''; 
    position: absolute; 
    z-index: -1; /* push it to the background */ 
    top: 12px; /* position it off the top background */ 
    right: 0; 
    bottom: 12px; /* position it off the bottom background */ 
    left: 0; 
    background: url(middle.png) top left repeat-y; 
} 

Jeśli potrzebne lub chciał wsparcie IE8 (które nie obsługuje wielu środowisk), a następnie można umieścić górne tło w głównym elemencie div i umieścić dolne tło za pomocą pseudo elementu div:after umieszczonego na spodzie kontenera.

Answer 2

Spróbuj zrobić tak:

background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat; 
    } 

EDIT: był tylko przykład, ale tutaj jest css z CSS:

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat; 
     } 

Answer 3

Jeśli można dodać dopełnienia/obramowania do bloku równej teł chcesz ustawić bez nakładania innego bloku, można użyć background-clip & background-origin ustawić górny i dolny tła ciągu Uszczelki/Granice i powtarzając tło nad treścią/podpowiedzi + treść.

Oto przykład: http://dabblet.com/gist/2668803

Na kodzie, będziesz być może trzeba dodać coś takiego:

padding: 12px 0; 
background-clip: padding-box, padding-box, content-box; 
background-origin: padding-box, padding-box, content-box; 

lub

border: solid transparent; 
border-width: 12px 0; 
background-clip: border-box, border-box, padding-box; 
background-origin: border-box, border-box, padding-box; 

i dostaniesz co potrzebujesz.Jeśli nie możesz uzyskać klocków/granic, wspomniany pseudoelement, taki jak ScottS, będzie działał idealnie.

Answer 4

Oto metoda, która wykorzystuje 3 div dla każdego z Top, Bliskiego i Spód obrazy, które są przejrzyste, aby zastosować do swojej strony internetowej.

Tapeta tła jest opcjonalna.

Testowany w nowoczesnych przeglądarkach i przyjazny dla IE8.

Ta metoda pozwala traktować ciała elementu, jak powinien być traktowany, to Twoja strona markup robi nie muszą być w opakowaniu lub zawierającego elementu.

jsFiddle Example
jsFiddle Example with centered filled

Od powyższym przykładzie wykorzystuje miejsce obraz zawartości uchwyt, który jest bez przejrzystości dla górnych i dolnych obrazów można zweryfikować znaczników współpracuje z przejrzystości w tej jsFiddle który wykorzystuje mini przejrzystych ikon w trybie powtarzania HERE.

Answer 5

Jedyny (praktyczny, nie zagrażający owłosieniu) sposób, jaki widzę, to robię to w Javascript, kiedy strona została załadowana, a gdy jest zmieniana, z rozmiarem płótna dopasowanym do wewnętrznej wysokości i 3 obrazkami: rysuj pierwszy raz na górze, narysuj drugi tyle razy, ile potrzeba, aby pokryć pozostałą część płótna, i narysuj trzeci na dole płótna. Ustaw płótno na 0,0 z absurdalnie ujemnym z-indexem.

Udało mi się to z trzema obrazkami (643 x 12, 100 i 12) i oczywiście pierwszym problemem, jaki zobaczyłem, było to, że trzeci obraz został narysowany nad częścią ostatniej iteracji drugiego obrazu - chyba że masz wysokość okna dokładnie 12 + 12 + (p2.height * X), ​​będziesz miał pewne nakładanie. Ale tego się oczekuje, prawda?

Answer 6

Myślę, że naprawi to, ponieważ z-index wpływa tylko na elementy DZIECKO, co oznacza, że ​​nie można zepsuć niczego na stronie, która używa z-index.

górze i na dole zdjęcia z-index:3;

środkowy obraz z-index:2;background-repeat:repeat-y;

Answer 7

faktycznie znalazłem prostszy dylemat, bo miałem ten sam problem z poziomą nawigacji.

Zamiast dodawać kod, tak jak inne odpowiedzi, po prostu trzeba je inaczej wymienić w swoim CSS. Obraz środkowy, który się powtarza, musi być na końcu ostatni, nie pierwszy ani drugi.

W moim kodu wygląda tak:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif); 
background-position: left, right, center; 
background-repeat: no-repeat, no-repeat, repeat-x; 

Answer 8

radykalną, ale skuteczny sposób na radzenie sobie z tym, jeżeli:

1. chcesz zastosować tła bez nakładania się na „: przed "
2. polecenia ": przed" element znany jako maksymalna wysokość

---

&:before { 
    background: url('vertical-line.png') no-repeat 0px, 
       url('vertical-line-repeat.png') no-repeat 140px, 
       url('vertical-line-repeat.png') no-repeat 200px, 
       url('vertical-line-repeat.png') no-repeat 260px, 
       url('vertical-line-repeat.png') no-repeat 320px, 
       url('vertical-line-repeat.png') no-repeat 380px, 
       url('vertical-line-repeat.png') no-repeat 440px, 
       url('vertical-line-repeat.png') no-repeat 500px, 
       url('vertical-line-repeat.png') no-repeat 560px, 
       url('vertical-line-repeat.png') no-repeat 620px, 
       url('vertical-line-repeat.png') no-repeat 680px, 
       url('vertical-line-repeat.png') no-repeat 740px; 
}