html - 文本的背景颜色。之间的空间。线宽相同。线上填充

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

演示。