css - 图像底部的两行文字

Question

我有两条文字要放在底部的图像之上，就像这样:

但是，现在它看起来像这样:

这是 HTML:

 <div class="image">

 <%= image_tag @post.image %>
 <div class="toptext">
 Lorem ipsum dolor
 </div>
 <div class="bottomtext">
 Lorem ipsum
 </div>

 </div>

这是 CSS:

 .image img {
   width: 100%;
   height: 500px;
 }

 .image {
   position: relative;
 }


 .toptext {
   position: absolute;
   bottom: 0;
   top: 0;
   right: 0;
   left: 0;       
   background: rgba(0,0,0,0.2);       
   font-size: 40px;
  }

  .bottomtext {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;        
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
   }

如何在“toptext”下方的“bottomtext”获得图像底部的两条线？

Answer 1

这是一个将图像作为包含元素的背景并将文本段绝对定位在容器内的解决方案。 fiddle :http://jsfiddle.net/5Kf5n/ .

HTML:

 <div>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum</p>
 </div>

CSS:

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 10px;
}

body > div {
    width: 500px;
    height: 300px;
    background: url(http://placehold.it/500x300px) no-repeat;
    position: relative;
}

div > p {
    font: bold 24px/1 Sans-Serif;
    color: #121212;
    position: absolute;
    bottom: 50px;
    left: 70px;
}

div > p + p {
    font-size: 12px;
    font-style: italic;
    bottom: 25px;
}