Question

我有2个div，div1包含图片，div2包含一些文本。我想通过设置margin-top=-50px将带有文本的div2覆盖div1图片的一部分。但是，div2的背景没有覆盖div1中的图像，如何解决？

代码如下：

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

<body>
  <div class="container-fluid">
    <div class="row">
    
      <div class="col-md-12">
        <img src="https://pbs.twimg.com/profile_images/795971591511347200/BE9ga9uY_400x400.jpg">
      </div>
    </div>
  </div>
  
  <div class="container-fluid" style="margin-top: -50px; background: red">
    <div class="row">
      <div class="col-md-12">
        <div>
          Here is some text with background color red. Text covers the image but background does not. 
        </div>
      </div>
    </div>
  </div>
  
</body>

</html>

Answer 1

$ git ndiff origin/master..HEAD -- dev/ # example
M dev/main.scss   |   9 +
A dev/rs.js       |  19 ++

position: absolute;

如何用另一个div的背景覆盖图像的一部分？

1 个答案: