Question

我有一张图像（用作背景），我希望将其放在容器的底部。

我希望此图像保持其当前高度，但要拉伸到容器的宽度。

这是我已经拥有的：

background:url('images/poll-graph.svg') no-repeat center bottom;

HTML看起来像这样：

<section id="sec-feature-polling">
    <div class="container">
        <h2>This is a heading</h2>
        <p class="subheading">This is a subheading</p>

    </div>
</section>

我尝试添加background-size: 100%，但这会导致图像按比例缩放（高度增加）。

我正在使用Bootstrap 4.0.0。

将非常感激地收到任何帮助： - ）

Answer 1

好的，如果您愿意共享HTML结构，那将会有很大帮助。

将div容器放入class。我会上课是xyz。

现在在你的CSS中做这样的事情......

.xyz {
    background-image: url("paper.gif");
        background-repeat: no-repeat;
        max-width: 100%;
}

这将根据其中的内容更改xyz容器的高度。

出于某种原因，我不确定我们是否可以使用所有这一行

background:url('images/poll-graph.svg') no-repeat center bottom;

[更新] 根据您添加的HTML结构，我们了解您希望将图片放在容器的底部。

试试这个：

关闭所有容器div类（因为您使用的是bootstrap，容器类添加了填充）
现在，因为您希望它位于容器下方，所以在容器
在div类中添加您想要的内容

然后尝试这样的事情作为你创建的新div类的css

background-image: url('../images/college-cover.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 750px;

拉伸CSS背景（仅限更改宽度）

1 个答案: