Question

当前，当我调整窗口大小时，div的宽度变小了，但图像仍然固定在左侧。因此，如果我在移动浏览器上查看它，则会看到图像的左侧。我无法弄清楚在调整图像大小时左右两侧的宽度时，如何始终看图像的中心。图像是2560 x 677。

这是我现在拥有的CSS：

#showcase {
position: relative;
margin: auto;
min-height: 600px;
background: url("banner.png"); }
#showcase .primary-overlay {
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

这是相关的div：

<section id="showcase" class="py-5">
<div class="primary-overlay text-white">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="display-1 mt-5 pt-5">
<strong>FILLER TEXT</strong>
</h1>
<p class="lead">BLAH BLAH BLAH </p>
<div class="text-white display-4" id="countdown"></div>

感谢您的见解。

Answer 1

使用background-position将背景放置在元素中。而且您可能还想使用background-size来告诉图像如何调整大小。

#showcase {
    position: relative;
    margin: auto;
    min-height: 600px;
    background-image: url("banner.png");
    background-position: center;
    background-size: contain; /* or cover */
}

如何使背景图像响应？

1 个答案: