我想将两张图片放在另一张图片之外。请找到我正在尝试修复的下图。但我无法找到解决方案。
.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>
我想要以上格式的设计。蓝色图像显示在两个图像之外。但我做不到。请审查并指导我...
最佳答案
将 position:relative; 添加到每个 img 中，因为 z-index 仅适用于定位元素
关于html - 如何设置两张图片超越另一张图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43275481/