背景颜色到文本。两者之间的空间。线条宽度相同。在线上填充

时间:2012-06-24 23:20:55

标签: html css

我有一个文本块,我需要为各个行提供背景颜色,中间有空格。

我已经用

部分实现了这个目标
<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类使用一些背景图像技巧?

This is what I am trying to achieve

2 个答案:

答案 0 :(得分: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;}

以下是它的外观:

enter image description here

(obv,我仍需要设置文本样式)

答案 1 :(得分: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)
}

DEMO.