我想將我的背景圖像放在中央，並且只向左側重複最後一個左側像素列，向右側重複最後一個像素行，向下重複最後一個像素。所以，如果你縮小你看到這個將背景圖像放在中間，然後重複最後一個像素到左側和右側

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

和下面的圖片像素的最低行重複下去。

我希望你明白我的意思...

小須

來源

2013-02-26 user2110914

我不認爲這是可能只與'css' ... – 2013-02-26 11:23:26

而在角落裏它會是什麼樣子？我不認爲它是可管理的。你可以提供更多關於你想要做什麼的細節？這樣做的目的是什麼？你的div有固定的高度嗎？ – 2013-02-26 11:47:41

看一看下面的鏈接。

Position a CSS background image x pixels from the right?

來源

2013-02-26 11:08:25 pavan

此筆說明這怎麼可能現在border-image，在這個問題被問的時候有支持很差，但支持最新版本的所有主流瀏覽器：（IE11+, Firefox 15+, Chrome 16+, Safari 6+）

基本上，您使用background-image來呈現'完整'圖像，使用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;  
}

然後，您可以使用border-image的重複邊緣。請注意，使用border-image-slice只能抓取邊上1px的邊。

#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

來源

2014-09-11 21:06:26 natchiketa

它的工作原理，但我的Chrome瀏覽器正在大規模落後，如果我在我的大屏幕上打開它這僅僅是css3實現的限制嗎？ – Hashbrown 2015-10-25 15:36:39

這不是你正在尋找確切的解決方案，但它可能對一些圖片你同樣的效果正在尋找：

.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 
}

來源

2016-10-28 01:15:29 kenny

以1px的寬切片圖像並保存。這是我用於粘頁腳一個196px寬的左邊部分的代碼，並重復1px的寬的右側部分：

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

來源

2018-02-14 12:12:00

將背景圖像放在中間，然後重複最後一個像素到左側和右側

回答

Live example on CodePen

相關問題