我试图在图像上放置两个文本块,一个在左上角,另一个在右下角。左上角的文字没问题,但我不能把文字放在右下角。
这是html代码:
<section class="feed">
<div class="section">
<img src="">
<p class="text1"><span>Text 1</span></p>
<p class="text2"><span>Text 2</span></p>
</div>
<div class="section">
<img src="">
<p class="text1"><span>Text 3</span></p>
<p class="text2"><span>Text 4</span></p>
</div>
</section>
现在是 CSS:
.section {
position: relative;
width: 65%;
margin: 3.375em 0 0 5%;
}
img {
width: 100%;
}
.text1 {
position: absolute;
top: 7.5%;
width: 100%;
}
.text1 span {
color: white;
font: 1.5em Helvetica, Sans-Serif;
font-weight: 300;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 0.625em;
}
.text2 {
/* don't know how to put this one in the bottom right */
}
.text2 span {
color: white;
font: 1em Helvetica, Sans-Serif;
font-weight: 300;
background: rgb(241, 91, 87);
/* fallback color */
background: rgba(241, 91, 87, 0.7);
padding: 0.625em;
}
谢谢。