图像底部的两行文字

时间:2014-07-17 03:58:09

标签: css

我想要将两段文字放在底部的图像上,如下所示:

enter image description here

然而,现在它看起来像这样:

enter image description here

这是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;
   }

如何使用&#39; bottomtext&#39;来获取图像底部的两行?以下&#39; toptext&#39;?

2 个答案:

答案 0 :(得分:1)

这是一个解决方案,它将图像作为包含元素的背景,并将文本段绝对定位在容器中。小提琴: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;
}

答案 1 :(得分:0)

设置.bottomText margin-top属性,它将满足您的目的。我已经做到了60。

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