CSS repeat-x 但只有图像中我想要的部分

Question

我使用 background-size: cover 移动屏幕尺寸。

但是，对于桌面，如果我使用 background-size: cover，我在我的屏幕上看不到猫图片。因为，我的图片的原始尺寸是高度比宽度长很多。

所以，我想只重复我的图片中没有出现猫的部分.但是，如果我使用 background-size: contain & background-repeat: repeat-x，我会看到以下内容：

（图中的猫出现了3次。）

我想做的是像下面这样的事情：（只重复左右两边猫没有出现的部分。）

我在谷歌上搜索了很多，并阅读了 Whosebug 中的几篇文章。但是，我找不到我想要的答案。如果您能给我任何建议，我将不胜感激！

* 以下是图片链接：

- [第 1] https://postimg.cc/image/6pku8wgcr/

- [第二] https://postimg.cc/image/rz8gjr4d7/

- [原创猫背景] https://postimg.cc/image/hcenege97/

Answer 1

想法是用多个背景叠加来模拟这样的效果：

body {
 margin:0;
 min-height:500px;
 height:100vh;
 background:
   /*the main background*/
   url(https://picsum.photos/3744/5616?image=742) center,
   /*repeat the left part*/
   url(https://picsum.photos/3744/5616?image=742) 40% 50%,
   url(https://picsum.photos/3744/5616?image=742) 30% 50%,
   url(https://picsum.photos/3744/5616?image=742) 20% 50%,
   url(https://picsum.photos/3744/5616?image=742) 10% 50%,
   url(https://picsum.photos/3744/5616?image=742) 0% 50%,
   /*repeat the right part*/
   url(https://picsum.photos/3744/5616?image=742) 60% 50%,
   url(https://picsum.photos/3744/5616?image=742) 70% 50%,
   url(https://picsum.photos/3744/5616?image=742) 80% 50%,
   url(https://picsum.photos/3744/5616?image=742) 90% 50%,
   url(https://picsum.photos/3744/5616?image=742) 100% 50%;
  background-repeat:no-repeat;
  background-size:contain;
}

根据图像，您可以调整背景的百分比和数量以控制重复。这是对第一个代码的改进，通过减少重复的步骤来隐藏左侧不需要的部分：

运行并在全屏模式下比较这段代码和之前的代码

body {
 margin:0;
 min-height:500px;
 height:100vh;
 background:
   /*the main background*/
   url(https://picsum.photos/3744/5616?image=742) center,
   /*repeat the left part more than the right*/
   url(https://picsum.photos/3744/5616?image=742) 45% 50%,
   url(https://picsum.photos/3744/5616?image=742) 40% 50%,
   url(https://picsum.photos/3744/5616?image=742) 35% 50%,
   url(https://picsum.photos/3744/5616?image=742) 30% 50%,
   url(https://picsum.photos/3744/5616?image=742) 25% 50%,
   url(https://picsum.photos/3744/5616?image=742) 20% 50%,
   url(https://picsum.photos/3744/5616?image=742) 15% 50%,
   url(https://picsum.photos/3744/5616?image=742) 10% 50%,
   url(https://picsum.photos/3744/5616?image=742) 5% 50%,
   url(https://picsum.photos/3744/5616?image=742) 0% 50%,
   /*repeat the right part*/
   url(https://picsum.photos/3744/5616?image=742) 60% 50%,
   url(https://picsum.photos/3744/5616?image=742) 70% 50%,
   url(https://picsum.photos/3744/5616?image=742) 80% 50%,
   url(https://picsum.photos/3744/5616?image=742) 90% 50%,
   url(https://picsum.photos/3744/5616?image=742) 100% 50%;
  background-repeat:no-repeat;
  background-size:contain;
}

更新

这是包含您的图片的代码：

body {
 margin:0;
 min-height:500px;
 height:100vh;
 background:
   /*the main background*/
   url(https://i.stack.imgur.com/76q2w.png) center,
   /*repeat the left part*/
   url(https://i.stack.imgur.com/76q2w.png) 40% 50%,
   url(https://i.stack.imgur.com/76q2w.png) 30% 50%,
   url(https://i.stack.imgur.com/76q2w.png) 20% 50%,
   url(https://i.stack.imgur.com/76q2w.png) 10% 50%,
   url(https://i.stack.imgur.com/76q2w.png) 0% 50%,
   /*repeat the right part*/
   url(https://i.stack.imgur.com/76q2w.png) 60% 50%,
   url(https://i.stack.imgur.com/76q2w.png) 70% 50%,
   url(https://i.stack.imgur.com/76q2w.png) 80% 50%,
   url(https://i.stack.imgur.com/76q2w.png) 90% 50%,
   url(https://i.stack.imgur.com/76q2w.png) 100% 50%;
  background-repeat:no-repeat;
  background-size:contain;
}

Answer 2

也可以使用渐变来绘制图像不应重复的区域。

html {
  min-height:100vh;
  background-image:
   url(https://s25.postimg.cc/kw0l49gz3/original.png), 
   linear-gradient(to top, rgb(116, 164, 61) 27.5%, gray 27.5%, gray 27.6%, rgb(67, 97, 32) 27.6%);
  background-position:center center;
  background-repeat:no-repeat;
  background-size: auto 100%;
}

如果可以匹配，可以使用图像本身的一部分并进行拉伸。

html {
  min-height:100vh;
  background-image:
   url(https://s25.postimg.cc/kw0l49gz3/original.png), 
   url(https://s25.postimg.cc/kw0l49gz3/original.png );
  background-position:center center, 10% center ;
  background-repeat:no-repeat;
  background-size: auto 100%, 2000% 100%;/* stretch part of image behind the other one with a hudge value*/
}

CSS repeat-x 但只有图像中我想要的部分

CSS repeat-x BUT only a part I want in an image

css

background

background-size

background-repeat