Question

我正在使用Bootstrap，对前端来说还很陌生。我没有CSS文件，我只有python django项目中包含的html文件。在此文件中，我正在尝试放入本节中的背景图像。

此图像无法完全显示或无法放大到完整尺寸。我不确定如何使包含图片的背景部分变得敏感，也不确定如何确保该部分至少扩展为完整大小或页面大小。你能帮忙吗？

无论我如何尝试以CSS形式找到在线节目，而且我现在都不想包含CSS。只想通过boostrap html文件保持简单。这是下面的代码。

<section class="jumbotron text-center" style="background:transparent url({%static 'workspace.jpg'%}) no-repeat center center /cover">
    <div class="container">`enter code here`
            <h1 class="jumbotron-heading">Name heading</h1>
            <p class="lead font-weight-bold text-muted">Test 2</p>
            <p>
            <a href="mailto:test@gmail.com" class="btn btn-info my-2">Email</a>
            </p>
      </div>
</section>

Answer 1

您可以像这样<style>.jumbotron .text-center{background-size:cover; background-repeat:no-repeat; background-position:center;}</style>那样在样式标签中添加此代码，我建议您向部分添加特定的调用，该样式仅会影响特定的div。

如果您要添加内联，请执行以下操作style="background-image:url(img);background-size:cover; background-repeat:no-repeat; background-position:center; "

Answer 2

要将背景图像添加到具有嵌入式CSS的容器中，您可以执行以下操作：

注意*：确保删除border: 1px solid red;。这只是为了演示。

<div class="container" style="border: 1px solid red; background-image: url('https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1'); background-size: 100% 100%; background-repeat: no-repeat;">
  
     <p style="padding: 100px;">content</p>

</div>

我的背景图片无法完全展开或无法显示完整尺寸。 html部分

2 个答案: