背景顏色爲文本。兩者之間的空間。線條寬度相同。上線填充

我有一個文本塊，我需要給一個背景色，以各條線在兩者之間的空間。背景顏色爲文本。兩者之間的空間。線條寬度相同。上線填充

我已經部分地與

<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

來源

2012-06-24 Fraser

不，你不能這樣做，只用CSS。補白僅應用於塊級元素和你的線並不是塊肯定.. –

可你要acheive結果添加圖像？我很難理解你需要什麼 – Yisela

我已經爲你添加了一個圖像 – Fraser

我使用背景圖片達到的效果：

.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，我還需要文本樣式）

來源

2012-06-24 23:46:25 Fraser

是有可能

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

來源

2012-06-24 23:35:02

感謝您的回覆。我不認爲我在最初的帖子中對自己的描述很清楚。我已經添加的圖像顯示什麼，我試圖實現 – Fraser

檢查更新[小提琴]（http://jsfiddle.net/heera/crLJ5/3/） –

再次感謝，但是我需要這一段文字是CMS可編輯，因此將其分爲不同的塊是不可行的。我找到了使用背景圖像的解決方案。很快就會發布。 – Fraser

背景顏色爲文本。兩者之間的空間。線條寬度相同。上線填充

回答

相關問題