CSS repeat-x但只需要圖像中的一部分

Question

我使用了background-size: cover用於移動屏幕尺寸的background-size: cover 。

但是，對於台式機，如果我使用background-size: cover ，則在圖像中看不到貓。 因為，我圖像的原始大小是高度遠大於寬度。

因此，我只想重復圖像中沒有出現貓的一部分。 但是，如果我使用background-size: contain ＆ background-repeat: repeat-x ，則看到的是以下內容：

（圖像中的貓出現了3次。）

我想要做的是如下所示： （僅重復左右不出現貓的部分。）

我在Google上搜索了很多，並閱讀了StackOverflow中的幾篇文章。 但是，我找不到想要的答案。 如果您能給我任何建議，我將不勝感激！

*以下是圖片的鏈接：

-[第一] 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; } 

UPDATE

這是帶有您的圖片的代碼：

 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*/ }