css - 使用 div 作为背景 - 响应式

Question

我确定可能有更好的方法来执行此操作，但我正在尝试附加另一个带有背景图像的 div with specific and exact line designs作为这些圆 Angular 矩形的背景。我当然能够使用 position: absolute 和 z-index 来做到这一点，但这并不能阻止屏幕大小的调整。 无论如何要附加 div 背景，以便它在调整屏幕大小时缩小相同的数量并保持在相同的位置？ 或者我是否必须在尽可能多的屏幕尺寸上手动重新定位和调整大小？ 非常感谢你提前。

.clientbackground {
display: flex;
position: absolute;
background-image: url(../images/yellowl.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
height: 48vmax;
width: 47.5%;
top: 6%;
right: 8%;

html

<div class="container">
<div class="clients">
<div class="clienttext">
<h1>CLIENTS</h1>
<div id="clientborder"></div>
<p>text<br>
</p>

</div>  
<div class="clientcontent">
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
<div class="rectangle"><img src="" title=""></div>
</div>
<div class="clientbackground"></div>

    </div>

Answer 1

在与您交谈并了解您的要求后更新我的答案。

您必须更新您的 HTML 和 CSS。

对于这种类型的布局，你必须使用伪元素意味着 :after 和 : before，你还必须使用 nth 意识形态用于制作此布局。

CSS 和 HTML:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

.outer { padding:60px; background: #32d2b0;
background: -moz-linear-gradient(top, #32d2b0 0%, #26aad2 100%);
background: -webkit-linear-gradient(top, #32d2b0 0%,#26aad2 100%);
background: linear-gradient(to bottom, #32d2b0 0%,#26aad2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32d2b0', endColorstr='#26aad2',GradientType=0 ); }
.clientcontent { margin:0 -15px; }
.item { width:33.3333%; padding:0 15px; float:left; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.rectangle { background:#FB9999; height:64px; margin-bottom:30px; border-radius:5px; position:relative; z-index:5;}
.rectangle:after { background:#E9E502; content:""; position:absolute; top:50%; left:100%; height:6px; width:30px; margin-top:-3px; }
.item:nth-child(3n+3) .rectangle { /*background:black;*/ }
.item:nth-child(3n+3) .rectangle:after { background:rgba(0,0,0,0); border:6px solid #E9E502; border-left:none; height:88px; width:30px; border-radius:0 5px 5px 0; z-index:1; }

.item:nth-child(3n+1) .rectangle { /*background:blue;*/ }
.item:nth-child(3n+1) .rectangle:before { content:""; position:absolute; top:50%; right:100%; margin-top:-3px; background:rgba(0,0,0,0); border:6px solid #E9E502; border-right:none; height:88px; width:30px; border-radius:5px 0 0 5px; z-index:1; }
.item:nth-child(6n+6) .rectangle:after,
.item:nth-child(6n+1) .rectangle:before,
.item:nth-last-child(3) .rectangle:before{ display:none; }

	<div class="outer">
	<div class="clientcontent">
    <div class="clearfix">
    <div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
		<div class="item"><div class="rectangle"></div></div>
    </div>
	</div>
  	</div>

希望对您有所帮助。

谢谢