上一篇: css – 动画部分有效但不完全下一篇:winapi – HBRUSH到RGB值

css – 将背景图像放在中心并向左和向右重复最后一个像素

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 将背景图像放在中心并向左和向右重复最后一个像素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

Live example on CodePen