我想将我的背景图像放在中央，并且只向左侧重复最后一个左侧像素列，向右侧重复最后一个像素行，向下重复最后一个像素。所以，如果你缩小你看到这个将背景图像放在中间，然后重复最后一个像素到左侧和右侧

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

相关问题