7

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

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

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

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

敏克

4

4 回答 4

3

这支笔说明了现在如何实现这一点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 上的实时示例

于 2014-09-11T21:06:26.173 回答
1

看看下面的链接。

将 CSS 背景图像从右侧定位 x 像素？

于 2013-02-26T11:08:25.850 回答
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
}
于 2016-10-28T01:15:29.890 回答
1

取一个 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%;
}
于 2018-02-14T12:12:00.280 回答