我有多个 div,里面有一个背景图片。
这张背景图片有一定的高度和宽度,上面有绝对元素。
工作示例:
.first {
width: 600px;
border: 2px solid #000;
margin: 30px;
}
.second {
width: 1024px;
border: 2px solid #000;
margin: 30px;
}
.third {
width: 1200px;
border: 2px solid #000;
margin: 30px;
}
.container {
background-image: url('https://i.stack.imgur.com/AfygH.png');
height: 401px;
width: 688px;
background-repeat: no-repeat;
position: relative;
margin: 0 auto;
}
.coil {
position: absolute;
top: 49.55%;
left: 24.3%;
}
.evaporator {
position: absolute;
top: 7.25%;
left: 54.5%;
}
.compressor {
position: absolute;
top: 53.15%;
left: 59.2%;
}
<div class="first">
<div class="container">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
</div>
<div class="second">
<div class="container">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
</div>
<div class="third">
<div class="container">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
</div>
我试过使用像
transform: scale(0.8)
这样的比例,但它不是所有 div 的统一宽度。
如果我给
width: 100%
.container
然后position:absolute
元素被扭曲并放置在不同的位置。
我怎样才能实现使背景图像 div
.container
占据父宽度的结果,如 600
,1024
,1200
.