Question

我试图在图片上放一些文字，但它不起作用。它只是将我的文字放在我的图像之下，我无法提起它。

我的代码：

＆＃13;

.Happylady {
  position: relative; 
  width: 100%;
}
.Happylady p {
  float: left;
  position: absolute; 
  left: 0; 
  top: 80px;
  width: 100%; 
}

＆＃13;

<div class="Bannerimage">
  <img src="content/severroom.png" class="centerimage" />
  <p>Check out speeds up to 60Mbps!</p>
  <a href="/cable/"><button >View Packages!</button></a>
</div>
<div class="Internet">
  <div class="Information">
    <h3>INTERNET</h3>
    <h7>CABLE, DSL & RURAL WIRELESS</h7>
  </div    
  <div class="HappyLady">
      <img src="content/happylaptoplady.png" alt="" />
      <div class="contents">
          <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
          <div class="Benefits">
              <p>UNLIMITED PLANS AVAILABLE</p>
              <p>NOW WITH LOWER PRICES</p>
              <p>FASTER SPEEDS - UP TO 60 MBPS!</p>
          </div>
      </div>
  </div>
</div>
<div class="Phone">
  <h3>PHONE</h3>
  <h7>RESIDENTIAL & COMMERCIAL</h7>
</div>
<div class="Television">
  <h3>TELEVISION</h3>
  <h7>SHAW DIRECT / INTERNET TV</h7>
</div>

＆＃13;

编辑：我已添加了我的整个HTML代码......这可能会显示我出错的地方。

Answer 1

您的课程在CSS中拼写错误，并且您将所有段落放在彼此之上。您需要将内容包装在容器中并进行定位。你也不需要漂浮。

＆＃13;

.HappyLady {
  position: relative; 
  width: 100%;
  }
.HappyLady div.contents {
  position: absolute; 
  left: 0; 
  top: 80px;
  width: 100%; 
  }

＆＃13;

<div class="HappyLady">
    <img src="http://placehold.it/400x400" alt="" />
    <div class="contents">
        <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
        <div class="Benefits">
            <p>UNLIMITED PLANS AVAILABLE</p>
            <p>NOW WITH LOWER PRICES</p>
            <p>FASTER SPEEDS - UP TO 60 MBPS!</p>
        </div>
    </div>
</div>

＆＃13;

Answer 2

尝试使用图像作为背景图像重构代码：

.HappyLady {
     position: relative; 
     width: 100%;
     background-image: url('http://truespeed.ca/wp-content/uploads/2016/06/happylaptoplady.png');
     background-size:100% 100%;
}

并从代码中删除图片代码。

图像上的文字不起作用

2 个答案: