CSS：设置background-size：覆盖属性以覆盖div而不是整个屏幕

Question

据我所知，CSS中的background-size：cover属性使背景图像尽可能大，以便覆盖整个屏幕。但是，因为这可能会扭曲大屏幕上的图像，我希望能够使背景图像覆盖它所在的div容器的宽度和高度，而不是整个屏幕的宽度。我不知道该怎么做。即使将我的图像放在HTML中的div中，background-size：cover属性仍会将图像扩展到整个屏幕。

我的CSS是：

.main {
  height: 30vh;
  text-align: center;
  background: url("https://i.imgur.com/6FYizew.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}

我的HTML是：

<div class = "container" style = "padding-top: 5vh">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class = "active hidden-xs"></li>
  </ol>
  <div class="carousel-inner">
<div class="item main active">
    <div class = "hidden-xs" style = "width: 80%; max-width: 1200px; margin: auto; position: relative; top: 15%; padding-top: 30px; padding-bottom: 40px; background-color: rgba(255, 255, 255, 0.8);">
        <h1 class = "hidden-xs" style = "font-size: 5em; font-weight: normal; color: #0b3c5d; font-weight: bold">TITLE</h1>
        <hr class = "intro-divider hidden-xs" style = "width: 550px; background-color: #232f3f">
        <h4 class = "hidden-xs" style = "margin-top: 15px; font-size: 1.5em; color: #232f3f"><em>SUBTITLE</em></h4>
    </div>
</div>

请让我知道如何设置封面仅覆盖容器而不是整个屏幕。谢谢！

Answer 1

你没有设置宽度...添加宽度大小，它只会覆盖.main div

如果您没有在div中设置宽度，那么它会使用自动宽度属性，这意味着您的div覆盖整个剩余的位置...当前您的主要div覆盖整页，这就是为什么您看到背景图像的原因整页

Answer 2

您希望显示容器分区<div class="container">的背景，此处您不会将该背景图像调用到该类，如果您检查该元素，则可以看到您的容器分区正在填满整个屏幕。 所以只需浏览上面的截图，如果我们将图像添加到容器部门，那么它将如上所示。如果您正在寻找它，那么只需添加 容器类的样式如下

<style>
.container {
  background: url("https://i.imgur.com/6FYizew.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}
</style>

我认为不是你正在寻找的东西，所以只需在纸上画一个布局并发送，我们就可以做到。