Question

我正在创建一个div，其中包含一个带有文字的图片，这些图片会按照这些指示覆盖一张大照片 - How to position text over an image in css。

但是，一旦我完成了这个，下面的div会随着图像渗入这个div。我做错了什么。

HTML：

  <div class="header-container">
        <header class="wrapper clearfix">
            <h1 class="title"><img src="img/ptmn_logo.gif" alt=""></h1>
            <nav>
                <ul>
                    <li><a href="#">On Stage</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <div class="main-container">
        <div id="bg">
            <img src="img/header.jpg" alt="">
            <p>This is your theater.</p>
        </div>
        <div class="main wrapper clearfix">

CSS：

    #bg {
      position: relative;
      top: -50%;  
      width: 200%; 
      height: 200%;
      z-index: -1;
    }

    #bg img {
      position: absolute;
      display: block;
      top: 0; 
      left: 0;   
      margin: auto; 
      min-width: 50%;
      min-height: 50%;
      z-index: 0;
    }

    #bg p {
      position: absolute;
      z-index: 100
    }  

    .main {
      position: relative;
    }

我很感激帮助！

Answer 1

看起来这就是你所需要的。我会摆脱所有其他风格，特别是任何边缘。您可以更改p元素的顶部和左侧属性，以调整其在header.jpg图像上的位置。

img {
  position: relative;
}
p {
  position: absolute;
  top: 0;
  left: 0;
}

<header>
  <img src="img/ptmn_logo.gif" alt="" />
  <nav>
    <ul>
      <li><a href="#">On Stage</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<img src="img/header.jpg" alt="">
<p>This is your theater.</p>

Div与图像被下一个div缩小

1 个答案: