Question

之前css div背景图片不能被覆盖在背景中意味着背景图像打破div并转到另一个div。请帮我解决这个问题。

请检查此codepen链接： -

这是我的代码

.learn-more {
  background: #063047;
  padding-bottom: 2em;
}

.learn-more:before {
  content: "";
  background-image: url(https://wallpapers.walldevil.com/wallpapers/a78/preview/breath-
 taking-nature-online-definition-high-background.jpg);
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: inherit;
  position: absolute;
  opacity: 0.15;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<style>
  /* css */
</style>
<div class="section learn-more">
  <div class="inner">
    <h2 class="" style="color:#fff;">I help you for this</h2>
    <p class="" style="color:#fff;">Do you want call</p>
    <p>
      <a href="#">
        <span class="" style="color:#fff;">CLICK HERE</span>
      </a>
    </p>
  </div>
</div>

Answer 1

您可以尝试使用此代码。

HTML：

<div class="section learn-more">
    <div class="inner">
        <h2 class="" style="color:#fff;">I help you for this</h2>
        <p class="" style="color:#fff;">Do you want call</p>
        <p>
            <a href="#">
                <span class="" style="color:#fff;">CLICK HERE</span>
            </a>
        </p>
    </div>
</div>

CSS：

.learn-more {
    background: #063047;
    padding-bottom: 2em;
    position: relative;
}

.learn-more:before {
    content: "";
    background-image: url(https://wallpapers.walldevil.com/wallpapers/a78/preview/breath-taking-nature-online-definition-high-background.jpg);
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-bottom: inherit;
    position: absolute;
    opacity: 0.15;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.inner h2{
    margin: 0;
}

Answer 2

.learn-more {
    background: #063047;
    padding-bottom: 2em;
    position:relative;
}

如果将任何div或元素定位到Absolute。确保父元素应为positon:relative;

Answer 3

使用position：inherit;而不是位置：绝对;在课堂上.learn-more :: before

.learn-more::before {
    content: "";
    background-image: url(https://wallpapers.walldevil.com/wallpapers/a78/preview/breath-taking-nature-online-definition-high-background.jpg);
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: inherit;
    position: inherit;
    opacity: 0.15;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Div之前css图像没有在div中覆盖

3 个答案: