CSS文字覆盖图像 [英] CSS Text over image

问题描述

我想将文字放在图片上，如下所示：

  .gallery-image {position：relative;} h2 {position：绝对; top：200px; left：0; width：100％;} h2 span {color：white; font：bold 24px / 45px Helvetica，Sans-Serif; letter-spacing：-1px; background：rgb（0，0，0）; background：rgba（0，0，0，0.7）; padding：10px;}  

 < div class = -image> < a href =＃> < img src =image.jpgwidth =280> < / a> < h2>< span>文字< / span>< / h2>< / div>  

解决方案

但是我的文字在图片后面， > Snippet正在为我工​​作：

• 提供 img a z-index：2;




• h2 a z-index：3;

I am trying to put text over an image like so:

.gallery-image {
  position: relative;
}
h2 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}
h2 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

<div class="gallery-image">
  <a href="#">
    <img src="image.jpg" width="280">
  </a>
  <h2><span>Text</span></h2>
</div>

but my text goes behind the image, what can I do to fix this?

解决方案

Snippet is working for me, anyway:

• Give the img a z-index: 2;

• And the h2 a z-index: 3;

这篇关于CSS文字覆盖图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！