CSS: Czy można powtarzać tylko część obrazu, aby użyć go jako tła?

Question

mam obraz, który jest zaokrąglony narożnik prostokątny, i wykorzystania jej do górnej i dolnej części w tle za pomocą:

#content_top { /* 760px by 30px */ 
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 0 scroll; 
    height: 10px; 
} 

#content_bottom { /* 760px by 30px */ 
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 -20px scroll; 
    height: 10px; 
} 

następnie użyć innej wysokości 1 piksel obrazu powtórzyć pionowo wypełnić obszar w -poniżej dla tego tła div. tak:

#content { /* 760px by 1px */ 
    background: #F7EECF url(images/content_body.png) repeat-y 0 0 scroll; 
} 

teraz zastanawiam się czy jest możliwe, aby po prostu użyć tego samego obrazu (content_top_bottom.png), lecz jedynie jego część, aby osiągnąć ten sam efekt? Próbowałem coś takiego, ale to nie działa:

#content { /* 760px by 1px */ 
    background: #F7EECF url(images/content_top_bottom.png) repeat-y 0 -5px scroll; 
} 

chcę użyć tego samego obrazu, ponieważ chcę, aby zmniejszyć liczbę żądania HTTP. obraz 1px prawdopodobnie nie będzie miał wielkiego wpływu, ale po prostu chcę spróbować. ktoś może pomóc?

Answer 1

Utwórz obraz 2280 x 10, umieszczając górną, środkową i dolną część obok siebie. Następnie można powtórzyć środkową część:

#content_top { 
    background: #F7EECF url(images/content_bg.png) no-repeat 0 0 scroll; 
    height: 10px; 
} 

#content { 
    background: #F7EECF url(images/content_bg.png) repeat-y -760px 0 scroll; 
} 

#content_bottom { 
    background: #F7EECF url(images/content_bg.png) no-repeat -1520px 0 scroll; 
    height: 10px; 
} 

Answer 2

Proponuję za pomocą 3 zdjęć, po drugiej stronie:

1. standardowych ikonek non-powtórzenie. W twoim przypadku byłby to content_top_bottom.png (choć może lepiej zmienić nazwę, aby była bardziej ogólna i może być użyta do innych części).
2. Obraz "Powtórzenie x". Byłby to obraz o szerokości 1px (lub trochę więcej, w zależności od projektu), ale bardzo wysoki. W tym miejscu umieścisz wszystkie obrazy, które powtarzają się w poziomie.
3. Obraz "repeat-y", podobny do # 2, z wyjątkiem 1px wysoki i bardzo szeroki. Tutaj możesz umieścić swój obraz content_body.png.

Chociaż w twoim przypadku powoduje to 2 żądania HTTP, jest o wiele bardziej skalowalny, ponieważ nie będziesz używał więcej niż 3. Niestety dla tła, które ułożone są w obu kierunkach, muszą być indywidualne.

Możesz również chcieć przeczytać o właściwości CSS3, border-image, która pozwoli ci użyć jednego obrazu dla całego elementu. To nie jest jeszcze dobrze obsługiwane, ale mam nadzieję, że nie będzie to zbyt długie: !