Question

我正在使用自定义模板的wordpress，我想显示窗口宽度的div。这是我的HTML代码：

<section id="calltoaction" class="calltoaction " style="background-position: 50% 15px;">
    <div class="blacklayer"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Title Text</h2>
                    <p>Test Text</p>
                </div>
                <div class="col-md-12 text-center">
                <a href="#" class="btn btn-danger btn-lg btn-primary">Download</a>
                </div>
             </div>
        </div>
</section>

这是我的css代码：

.calltoaction {
  background-position: unset !important;
    position: absolute;
    left: 0;
    right: 0;
        background-image: url(http://roguelevels.com/wp-content/uploads/2018/04/DSC6507-683x1024.jpg);
      background-size: cover;
    padding: 80px 0 90px 0;
}

问题是，我创建的所有内容都放在这个div类中：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

所以我正在尝试编写自定义css来创建一个显示在此类顶部的div，因为我无法直接访问模板的代码。

目前the result is this。我希望该图像适合页面的宽度。

非常感谢任何帮助。

Answer 1

参见附件代码片段，了解如何将div叠加在彼此之上，假设一个div有设置：position：absolute; 。我稍微移动了最低的div，以便可见。

.div-1 {
  position: absolute;
  z-index: 1;
  background-color: red;
  height: 100px;
  width: 100px;
  margin: 10px 0px 0px 10px;
}

.div-2 {
  position: relative;
  z-index: 2;
  background-color: green;
  height: 100px;
  width: 100px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="index.css">
  <body>

<div class="div-1"></div>
<div class="div-2"></div>

  </body>
</html>

如何在wordpress上覆盖css以显示全宽div？

1 个答案: