我想将我的背景图像放在中心，只重复左边的最后一个左边的像素列，右边和最后一个像素的底部重复相同。 所以，如果你缩小，你会看到这个
-------------- repeat last pixel of the right of the picture to the right
| |
| |
--------------
^
|
here repeat to the left the first pixels to the left
在图片下方，最下面一行像素重复下来。
我希望你明白我的意思......
小须
答案 0 :(得分：2)
此笔说明了border-image现在如何实现这一点，background-image在提出此问题时支持得很差，但在所有主流浏览器的最新版本上都受到支持：（IE11+, Firefox 15+, Chrome 16+, Safari 6+ ）
基本上，您使用background-position来呈现完整的＆＃39;图像，使用#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用于重复边缘。请注意使用#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;
}
仅抓住侧面的1px边缘。
{{1}}
答案 1 :(得分：1)
答案 2 :(得分：1)
这不是您正在寻找的确切解决方案，但它可能会对您正在寻找的某些图像产生相同的影响：
.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
}
答案 3 :(得分：0)
拍摄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%;
}