CSS或JavaScript将背景颜色仅放入段落的一部分
问题描述:
以下是我目前为止在此处的the link以在线查看它。CSS或JavaScript将背景颜色仅放入段落的一部分
p { line-height: 2; }
.highlight { background-color: yellow; }
目标是包裹引述内容,如以下(无边框是必要的,但我想整个背景,包括线之间的空间进行着色)
我看到图片不清楚,但我希望你能弄清楚这个想法。
当前版本仅突出了线和线之间的空间(由于线高度为高度大于1)不突出显示。
有没有什么办法可以在CSS或JavaScript中实现这一点?
答
这样做的一种方法是给标记的文本一个顶部和底部填充。
p {line-height:2}
mark {padding:.5em 0}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<mark>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</mark>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
答
嗨,你可以使用span标签,并设置跨度的背景,因此它会像
<p>this is the dummy text without any background <span style='background:yellow'> This text with the background colour</span> this text have no background</p>
你可以尝试这样做与CSS的形状,但它的[不完全支持的功能](http://caniuse.com/#feat=css-shapes) – Amit
请在问题 – Mustaghees
@Amit中包含相关的HTML和CSS所以这是不可行的(或至少实际上)。对? – msk