đặt hình nền ở giữa và lặp lại điểm ảnh cuối cùng sang trái và phải

Question

tôi muốn đặt hình nền của mình ở giữa và chỉ lặp lại các pixel pixel trái cuối cùng bên trái và tương tự cho bên phải và pixelrow cuối cùng xuống. để nếu bạn thu nhỏ, bạn thấy điều này

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

và bên dưới hình ảnh hàng thấp nhất của pixel lặp lại.

tôi hy vọng bạn hiểu những gì tôi có nghĩa là ...

mũi nhọn

Answer 1

Có một cái nhìn tại liên kết dưới đây.

Position a CSS background image x pixels from the right?

Answer 2

bút này minh họa cách này có thể bây giờ với border-image, trong đó có hỗ trợ rất nghèo đồng thời câu hỏi này được hỏi, nhưng được hỗ trợ trên phiên bản mới nhất của tất cả các trình duyệt chính: (IE11+, Firefox 15+, Chrome 16+, Safari 6+)

Về cơ bản, bạn sử dụng background-image để hiển thị hình ảnh 'đầy đủ', định vị hình ảnh ở giữa bằng cách sử dụng 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;  
} 

Sau đó, bạn có thể sử dụng border-image cho các cạnh lặp lại. Lưu ý việc sử dụng border-image-slice để chỉ lấy 1px cạnh ở hai bên.

#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

Đây không phải là giải pháp chính xác mà bạn đang tìm kiếm, nhưng nó có thể có tác dụng tương tự trên một số hình ảnh mà bạn đang tìm kiếm:

.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

Hãy 1px rộng lát hình ảnh và lưu nó. Đây là mã tôi đã sử dụng cho một chân dính với một phần 196px-sát bên trái và lặp đi lặp lại phần 1px toàn đúng:

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