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

Question

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

我已经用

部分实现了这个目标

<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类使用一些背景图像技巧？

Answer 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，我仍需要设置文本样式）

Answer 2

是的，这是可能的

.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.