<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;">
</a>
</div>
</div>我希望背景影像占據全高，并且子影像必須對齊背景影像的中心。最后，它必須是回應式的。
uj5u.com熱心網友回復：
你必須使用“高度：100vh”
<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;height: 100vh">
</a>
</div>
</div>
uj5u.com熱心網友回復：
使用width:100vh充分的高度和用途left以及right使image成為中心。
使用background-size: cover調整背景影像的大小以覆寫整個容器。
<div class="col-lg-12 text-center">
<div class="for-video-background" >
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" >
</a>
</div>
</div>
CSS：
body{
margin: 0;
}
img{
width:5rem;
position: absolute;
left: 47.5%;
top: 47.5%;
}
.for-video-background{
height: 100vh;
background-size: cover;
background-image: url('./assets/images/back-video.png')
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/406457.html
標籤：