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

Posted 2023-03-05

【中文标题】CSS：设置 background-size:cover 属性以覆盖 div 而不是整个屏幕

【英文标题】：CSS: Set background-size: cover property to cover div instead of whole screen

【发布时间】：2017-12-13 01:01:53

【问题描述】：

我知道 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>

请告诉我如何将封面设置为仅覆盖一个容器而不是整个屏幕。谢谢！

【问题讨论】：

你可以在这里摆弄吗

在此处更新您的 html 代码。实际上，如果我们将该背景图像放在 css 类中，然后如果我们从部门调用它，它将仅显示在该部门中。我希望我能帮助你

@SumithChalil 我在上面添加了我的 HTML。你打电话给部门到底是什么意思？

【参考方案1】：

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

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

【讨论】：

嗨，我在上面的 CSS 中添加了 width: 1200px。然而，它并没有改变背景跨越的宽度，它只是改变了主 div 本身的宽度，而背景仍然跨越了整个屏幕。

【参考方案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>

我认为这不是您真正想要的，所以只需在纸上画一个布局并发送它，我们可以做到。