Question

我在HTML中构建了一个简单的倒数计时器，现在我希望将所有文本放在图像上。所以图像在背景中，文本在它上面。

这是一个mac屏幕的图像，如果有意义，我希望文本在屏幕内...

代码：

.time-to {
  text-align: center;
  font-family: Bangers;
  color: white;
  font-size: 35px;
  letter-spacing: 2px;
}

.time-to span {
  display: block;
  font-size: 80px;
  color: #D9D900;
}

.macPic {
  position: absolute;
}

<div class="macPic" class="">
  <img src="Images/mac.png" class="img-responsive" alt="Responsive image">
  <div class='time-to'>
    Slutar Midnatt Söndag :
    <span countdown='' date='December 3, 2017 12:00:00'>&nbsp;</span>
  </div>
</div>

Answer 1

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

因为图像的z-index为-1，所以它将放在文本后面。

Answer 2

.time-to {
  text-align: center;
  font-family: Bangers;
  color: white;
  font-size: 35px;
  letter-spacing: 2px;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.time-to span {
  display: block;
  font-size: 80px;
  color: #D9D900;
}

.macPic {
  position: absolute;
}

<div class="macPic" class="">
  <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" class="img-responsive" alt="Responsive image">
  <div class="centered">
    Slutar Midnatt Söndag :
    <span countdown='' date='December 3, 2017 12:00:00'>&nbsp;</span>
  </div>
</div>

Answer 3

你可以使用背景图片，如果我误解了你的问题，请更正我

<div class="macPic" class="background-image: url("Images/mac.png");">
          <div class='time-to'>
            Slutar Midnatt Söndag : 
            <span countdown='' date='December 3, 2017 12:00:00'>&nbsp;</span>
          </div>
    </div>

Answer 4

试试这个CSS ...

.time-to{
   position:absolute;
   top:50%;
   left:10%;
}

Answer 5

两种可能的解决方案：

（1）将图像设置为div class="macPic"的背景图像：

.macPic {
   background-image:url('Images/mac.png');
}

（2）按照here所述使用定位让文字漂浮在图像上：

.macPic { position:relative; }
.time-to { position: absolute; }
.img-responsive { position: absolute; }

Answer 6

执行以下操作

.macPic {
    position: relative;
}

.time-to {
    position: absolute;
    /* You can replace * with any value that you like */
    top: *px;
    bottom: *px;
    right: *px;
    left: *px;
}

Answer 7

将mac.png图像放入css文件夹并将此代码添加到外部文件

.macPic { background-image:url('Images/mac.png'); }

将文字放在图像上

7 个答案: