我想把我的背景图像放在中心,只重复左边的最后一个左边的像素列,右边和最后一个像素的重复.
所以,如果你缩小,你会看到这一点
所以,如果你缩小,你会看到这一点
-------------- 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+)
基本上,您使用背景图像渲染“完整”图像,使用背景位置将其定位在中心.
#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;
}
