[英]Two text blocks over an image
我試圖在圖像上放置兩個文本塊,一個在左上角,另一個在右下角。 左上角的文本可以,但是我不能在右下角放置文本。
這是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;
}
謝謝。
您可以將其定位為絕對,但從右下角開始,而不是從左上角開始,對第一個文本塊進行處理。 像這樣:
.text2 {
position: absolute;
bottom: 0;
right: 0;
}
要查看運行中的代碼: http : //jsfiddle.net/KzFDx/
這是執行此操作的一種ez方法。
<div style="background= your image here no repeat, width height.....">
<p style="position, size,.... ></P>
<p style="position, size...."></P>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.