【问题标题】：put background image in center and repeat last pixel to left and right将背景图像放在中心并左右重复最后一个像素
【发布时间】：2018-02-14 20:12:00
【问题描述】：

我想把我的背景图像放在中心，只重复左边的最后一个像素列，右边和最后一个像素行相同。所以如果你缩小你会看到这个

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

在图片下方，最下方的像素行向下重复。

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

米克

【问题讨论】：

我认为只有css才有可能...
在角落它会是什么样子？我不认为这是可以管理的。你能提供更多关于你想要做什么的细节吗？这样做的目的是什么？你的 div 有固定的高度吗？

标签： css

【解决方案1】：

这支笔说明了现在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

【讨论】：

它可以工作，但是如果我在更大的显示器上打开它，我的 chrome 浏览器会严重滞后，这只是目前 css3 实现的限制吗？

【解决方案2】：

看看下面的链接。

Position a CSS background image x pixels from the right?

【讨论】：

【解决方案3】：

这不是您正在寻找的确切解决方案，但它可能对您正在寻找的某些图像产生相同的效果：

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

【讨论】：

【解决方案4】：

截取 1px 宽的图像切片并保存。这是我用于具有 196 像素宽的左侧部分和重复的 1 像素宽的右侧部分的粘性页脚的代码：

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

【讨论】：