Question

不确定为什么这么难，但我试图将浅灰色背景扩展到标题上的屏幕边缘。见here。

我尝试使用background:cover并在标题div之外创建div。有任何想法吗？注意：这是在WordPress中。也许我应该使用JavaScript或JQuery？

我已经尝试过了：

.bg-wraf {
  background-color: #f2f2f2;
  padding-bottom: 120px;
  position: ;
  width: 100%;
  background: cover;
  height: 120px;
}

Answer 1

我建议使用Inspect Element，看看你需要编辑哪些div才能实现这一点。看起来你希望背景为100％宽度的标题位于其他div中，然后将其限制在其属性中。

Answer 2

背景只会延伸到元素到达的范围。首先必须让元素占用你想要覆盖的空间，然后background: cover应该适合你。

Answer 3

您遇到的问题是您的元素位于具有固定宽度的BootStrap .container类中：

＆＃13;

.container {
  width: 50%; /* 1170px on your site, 50% is for this example */
  padding: 0 15px;
  margin: 0 auto;
}

.bg-wraf {
  background: #f2f2f2;
  padding: 10px; /* for clarity */
}

＆＃13;

<div class="container">
  <div class="bg-wraf">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dolor leo, tempor a magna dictum, rutrum sollicitudin nulla. Fusce pretium at turpis eget laoreet. Ut auctor risus sed felis feugiat, nec mollis elit dapibus. Sed eu feugiat turpis. Vivamus
    sed rhoncus libero. Integer cursus nibh ut orci imperdiet pretium.
  </div>
</div>

＆＃13;

你可能想要逃避＆＃39;从该容器，然后可能再次从.container类内部使用.bg-wraf类：

＆＃13;

.container {
  width: 50%; /* 1170px on your site, 50% is for this example */
  padding: 0 15px;
  margin: 0 auto;
}

.bg-wraf {
  background: #f2f2f2;
  padding: 10px 0; /* For clarity */
}

＆＃13;

<div class="container">
    Content padded but no background
</div>
<div class="bg-wraf">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dolor leo, tempor a magna dictum, rutrum sollicitudin nulla. Fusce pretium at turpis eget laoreet. Ut auctor risus sed felis feugiat, nec mollis elit dapibus. Sed eu feugiat turpis. Vivamus
    sed rhoncus libero. Integer cursus nibh ut orci imperdiet pretium.
  </div>
</div>
<div class="container">
    Content padded but no background
</div>

＆＃13;

另请注意，.bg-wraf上有一个BootStrap列偏移类，不应使用它来获得全宽。

希望这有帮助！：）

Answer 4

我检查了您的网站并设法添加div并应用背景颜色以达到预期效果。您需要将背景颜色div放在container div之外。

HTML

<div class="main_content">
  <div class="bg_grey">
    <div class="container">
      <div class="row">
        ..include all your divs that you want inside bg-grey
      </div>
    </div>
  </div>
</div>

CSS

.bg_grey {
  background-color: grey; // your background color here
}

Answer 5

我得到了它的工作。不确定这是否是正确的方法，但它的工作原理。

我发现问题是header.php文件中有两个容器被转移。

所以我只是在模板文件顶部关闭了两个。然后在标题后再添加它们。类似于Obsidian所说，但主要问题是不知道容器是在header.php文件中。

Obsidian几乎指出了这个问题，没有提到代码在header.php中的可能性。除了他的回答。

<?php
/**
 * Template Name: TEST Template.
 *
 * @version 1.0.
 */

get_header('tall');
the_post(); ?>

</div>
</div>

<div>
<div class="col-sm-12 col-sm-offset- bg-wraf" style="background-color: 
#f2f2f2 !important;">
    <?php

...

<div class="container">
<div class="row">

将背景延伸到屏幕边缘

5 个答案:

HTML

CSS