Question

我确定可能有更好的方法来做到这一点，但我正在尝试将另一个div与背景图像with specific and exact line designs作为这些圆角矩形的背景。我当然能够使用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：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

由于

使用div作为背景 - 响应

1 个答案: