1

画像の上に 2 つのテキスト ブロックを配置しようとしています。1 つは左上に、もう 1 つは右下にあります。左上のテキストは問題ありませんが、右下にテキストを配置できません。

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

ありがとう。

4

2 に答える 2

5

絶対的に配置することもできますが、最初のテキスト ブロックで行った左上ではなく、右下から開始します。このようなもの：

.text2 {
    position: absolute;
    bottom: 0;
    right: 0;
}

実際のコードを確認するには: http://jsfiddle.net/KzFDx/

于 2013-04-25T19:03:56.213 に答える
0

これは、これを行う 1 つの ez 方法です。

<div style="background= your image here no repeat, width height.....">
<p style="position, size,.... ></P>
<p style="position, size...."></P>
</div>
于 2013-04-25T19:06:35.753 に答える