umieść obraz tła pośrodku i powtórz ostatni piksel na lewo i na prawo.

Question

Chcę umieścić mój obraz tła w środku i powtórzyć tylko ostatnią lewą kolumnę w lewo i tak samo dla prawego i ostatniego piksela w dół. tak, że jeśli pomniejszyć widzisz ten

    -------------- repeat last pixel of the right of the picture to the right 
       |   | 
       |   | 
       --------------  
       ^
       | 
       here repeat to the left the first pixels to the left 

i poniżej obrazu najniższego rzędu pikseli powtórzyć w dół.

mam nadzieję, że rozumiesz, co mam na myśli ...

Minke

Answer 1

Wystarczy popatrzeć na poniższy link.

Position a CSS background image x pixels from the right?

Answer 2

Pióro ilustruje, jak to jest teraz możliwe dzięki border-image, który miał bardzo słabe wsparcie w tym czasie padło pytanie, ale jest obsługiwana w najnowszej wersji wszystkich głównych przeglądarek: (IE11+, Firefox 15+, Chrome 16+, Safari 6+)

Zasadniczo używasz background-image, aby renderować "pełny" obraz, ustawiając go w środku za pomocą background-position.

#container { 
    height: 100vh; 
    width: 100%; 
    margin: 0 auto; 
    padding: 0 20%; 
    box-sizing: border-box; 
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44521/light_minimalistic_soft_shading_gradient_background_1024x768_58884.jpg); 
    background-size: 61% 100%; 
    background-position: center 0; 
    background-repeat: no-repeat;  
} 

Następnie można użyć border-image dla powtarzających się krawędzi. Zwróć uwagę na użycie border-image-slice, aby pobrać tylko 1 piksel krawędzi po bokach.

#container { 
    border-width: 0 20% 0 20%; 
    border-image-source: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44521/light_minimalistic_soft_shading_gradient_background_1024x768_58884.jpg); 
    border-image-slice: 2; 
    border-image-width: 2 20%; 
    border-image-repeat: stretch; 
    border-image-outset: 2px; 
} 

Live example on CodePen

Answer 3

To nie jest dokładne rozwiązanie szukasz, ale może mieć taki sam wpływ na niektóre obrazy szukasz:

.bg { 
    background:url(../images/image.jpg),url(../images/image.jpg); 
    background-repeat: no-repeat, repeat; 
    background-position: 0px 0px; 
    background-position-x: center; 
    background-size: 1914px 100% , 1px 100%; // 1914px is the width of the image 
} 

Answer 4

Weź 1px szerokości kawałek obrazu i zapisz go. Jest to kod użyłem do lepkiej stopce z 196px szerokości lewej części A, a powtórzenie szerokości 1px prawy odcinek:

footer { 
    background-image: url('../../images/footer-left.png'), url('../../images/footer-right.png'); 
    background-repeat: no-repeat, repeat-x; 
    background-size: 196px 175px; 
    bottom: 0; 
    color: white; 
    height: 175px; 
    left: 0; 
    margin-bottom: 0; 
    padding-top: 75px; 
    position: fixed; 
    text-align: center; 
    width: 100%; 
}