透明文本框 - 图像叠加答案

【问题标题】：Transparent Text Box - Image Overlay透明文本框 - 图像叠加
【发布时间】：2014-10-24 09:56:02
【问题描述】：

如何将文本覆盖在带有背景的图像上，像这样

<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg"/>

</div>

【问题讨论】：

标签： html css image text overlay

【解决方案1】：

点赞http://codepen.io/anon/pen/jaBho

 <div>
  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, placeat!</h4>
  <img src="http://rack.0.mshcdn.com/media/ZgkyMDE0LzA4LzI0LzVkL21pbGV5ZG9nLmEzMDVjLmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/1750ef37/ade/miley-dog.jpg">
</div>

css

div{position: relative;
  margin: 35px;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

h4{
  background-color: rgba(174, 0, 0, 0.51);
  position: absolute;
  bottom: 30px;
  left: 30px;
  width: 300px;
  padding: 20px;
  display: block;
  color: white;
  font-size: 24px;
}

【讨论】：

【解决方案2】：

你的意思是这样的demo？

重要的事情：

父 div 必须有 position: relative 和文本 div position: absolute。然后用top: ?; left: ?; bottom: ? 和text-align: center 将其定位在图像上。

这里是 HTML：

<div id="slider">
    <img src="http://www.primolo.de/archiv/BrAlIbKe/hp_bilder/luftballons2_v-gallery_1_.jpg"/>
    <div id="slider-text">This is awesome</div>
</div>

还有CSS：

#slider {
  position: relative;
  width: 400px;
}

#slider-text {
  position: absolute;
  width: 200px;
  color: #FFF;
  font-weight: bold;
  bottom: 5%;
  left: 30px;
  padding: 30px 0;
  text-align: center;
  background-color: rgba(200, 50, 0, 0.8);
}

大部分东西都不是必需的，但我认为它看起来很不错。

希望这会有所帮助。

【讨论】：

非常感谢您的回答，但由于第一个答案首先发布，我必须将该答案标记为正确。但不要失望，因为您的回答同样出色！