CSS 文本的背景颜色(仅)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16597304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:54:15  来源:igfitidea点击:

Background color for text (only)

csstextbackground

提问by Toni Michel Caubet

I am wondering if it's posible to achieve this:

我想知道是否有可能实现这一目标:

enter image description here

在此处输入图片说明

I mean, applying the background color just to the text instead of the whole block,

我的意思是,将背景颜色仅应用于文本而不是整个块,

ej

ej

<h1>WELLCOME TO RENTAL IN MALLORCA BEATYFULL COLLECTION OF APPARTMENTS</h1>

Is there a (cross browser, if possible) way to do this?

有没有(如果可能的话,跨浏览器)的方法来做到这一点?

回答by Niet the Dark Absol

Yes. Add a <span>inside the <h1>, and apply the background colour and a line-height to it.

是的。在<span>内添加一个<h1>,并为其应用背景颜色和行高。

Demo

演示

回答by macrozone

In addition to Niet's answer:

除了 Niet 的回答:

to get extra space (here 10 px) on the left and right side of every line add this to the span:

要在每行的左侧和右侧获得额外的空间(此处为 10 像素),请将其添加到跨度:

h1 span {
  box-shadow: 10px 0 0px 0px #EDC330, -10px 0 0px 0px #EDC330;
}