我想要将两段文字放在底部的图像上,如下所示:
然而,现在它看起来像这样:
这是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;?
答案 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;
}