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

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

在图片下方，最下面的一行像素重复下来。

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

小须

---

这支笔说明了如何使用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;
}

在CodePen上的实例

---

看看下面的链接。

将CSS背景图像放置在右侧x像素？

---

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

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

链接地址: http://www.djcxy.com/p/69621.html

上一篇: put background image in center and repeat last pixel to left and right

下一篇: Create a query to fill the gaps in a table due to bad data