0

スペースを挟んで個々の行に背景色を付ける必要があるテキストのブロックがあります。

私はこれを部分的に達成しました

<div class="styleText">
    <span class="spaced">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
</div>

。

.styleText .spaced{
    background: rgba(0,0,0,6.5); 
    line-height: 1.2em; 
    /*width: 421px;*/
}

ただし、すべての線を同じ幅にする必要があり、各線の上下だけでなく、始点と終点にもパディングが必要です。

誰かがこの効果を達成する方法を考えることができますか、それともstyleTextクラスに背景画像のトリックを採用する唯一のオプションですか？

これが私が達成しようとしていることです

4

2 に答える 2

1

背景画像を使用して効果を達成しました。

.styleText{width: 387px; position: absolute; right: 0; bottom: 0; background: url(../images/styledTextBG.png) 0 2px; padding: 0 17px}
.styleText .spaced{line-height: 35px; display: inline; min-width: 421px;}

外観は次のとおりです。

ここに画像の説明を入力してください

（obv、私はまだテキストのスタイルを設定する必要があります）

于 2012-06-24T23:46:25.873 に答える
0

はい、可能です

.styleText{
    background: url(...); 
    width: 420px;
    height:300px;
    border:solid black 1px;
    padding:2%;
}

span.spaced{
    background: rgba(0,0,0,6.5);
    display:inline-block;
    padding:10px;
    color:#fff;
    width: 95%;
    text-align:justify;
    margin:2px auto;
    line-height:1em;
    opacity:0.7;
    font-size:14px;
    filter: alpha(opacity=70)
}

デモ。

于 2012-06-24T23:35:02.907 に答える