Question

我想在另一张图片之外设置两张图片。请找到我想要修复的下图。但我无法达成解决方案。

.main {
    border: 1px solid black;
    background-color: white;
    padding: 10px 10px 10px 10px;
	width: 1100px;
	height: 100%;
	margin: auto;
}
.container-fluid {
    background-image: url("bluescreen1.png");
	background-size: 100% 15%;
    background-repeat: no-repeat;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body class="main">
<div class="container-fluid">
  <div class="row" style="z-index: 1;">
	<div class="col-sm-12">
		<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg">
	</div>
  </div>
  <div class="row">
	<div class="col-sm-4">
		Some Text
	</div>
	<div class="col-sm-4">
		<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="Paris" style="width: 100%; height:320px; ">
	</div>
	<div class="col-sm-4">
		<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="Paris" style="width: 100%; height:320px; z-index: -100;">
	</div>
	
  </div>
</div>

</body>

我想要上面的设计格式。蓝色图像显示在两个图像之外。但我不能这样做。请查看并指导我...

Answer 1

将position:relative;添加到每个img，因为z-index仅适用于定位元素

如何设置两个图像超出另一个图像？

1 个答案: