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

【问题标题】：Background colour to text. Space in between. Lines same width. Padding on lines文本的背景颜色。之间的空间。线宽相同。线上填充
【发布时间】：2012-06-25 08:24:16
【问题描述】：

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

我已经部分实现了

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

【问题讨论】：

不，你不能只用 CSS 做到这一点。填充仅应用于块元素，您的行肯定不是块..
你能添加一张你想要达到的结果的图片吗？我很难理解你需要什么

标签： html css

【解决方案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，我还需要设置文本样式）

【讨论】：

【解决方案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.

【讨论】：

感谢您的回复。我认为我在最初的帖子中没有很清楚地解释自己。我添加了一张图片来展示我想要实现的目标
再次感谢，但是我需要这段文本是 CMS 可编辑的，因此将它分成不同的块是不可行的。我找到了使用背景图像的解决方案。很快就会发布。