Question

如何修复涵盖上一行文字的背景色（请参阅：http://jsfiddle.net/3uzbV/41/）。

div {
	font-family: Charis, serif; 
    font-size: 1.5em;
    line-height: 0.8em;
    text-align: justify;
}
    
span {
    background-color: red;
}

<div> firstString <span> secoundString </span> thirdString </div>

Answer 1

将文本嵌套在红色span内的另一个元素内（这里我使用了b）。这使我们离我们很近，但是红色bg遮盖了其上方的白色bg文本仍然存在问题。解决我使用过mix-blend-mode（即not currently supported in IE）

div {
  font-family: Charis, serif;
  font-size: 1.5em;
  line-height: 0.8em;
  text-align: justify;
}

span {
  background-color: red;
  display: inline;
  position: relative;
  mix-blend-mode: multiply;
}

span b {
  display: inline;
  position: relative;
  font-weight: normal;
}

<div>... ze cztery. Tymczasem na swym dworze. Nikt go przez okienic szpar i kłopotach, i stanęli kołem. W biegu dotknęła blisko dwadzieści i bawi się strzelbami a Pan świata wie, jak zdrowe oblicz gospodarza, gdy zacność domu, fortuny szczodrot objaśniają wrodzone
  wdzięki i stoi wypisany każdy ksiądz toż samo gada na boku. Panny tuż na wieś i że polskie ubrani wysmukłą postać kształtną i gałęzie drzewa cały las i raptem boczne drzwi od <span><b> płaczącej matki pod Napoleonem, demokrata przyjechał z nieba dochodziło mniej zgorszenia. Ach, ja wam służyć, moje panny Róży a oni tak się i, czyje były, odgadywał. Przypadkiem oczy podniósł, i gestami ją nudzi rzecz długa, choć młodzież teraźniejsza, Że tym bielsze, że nam, kolego! lecz w ziemstwie, potem się czerwieni.</b></span>  Twarzy wówczas nie korzystał dworze jak naoczne świadki. I Wojski z Warszaw mam list, to mówiąc, że.</div>

http://jsfiddle.net/3g9nvh2a/

Answer 2

我发现这篇很棒的文章：http://krasimirtsonev.com/blog/article/CSS-The-background-color-and-overlapping-rows-inline-element

添加显示：内联;到div标签，位置：相对;到span标签。

你会得到这个：

div {
    font-family: Charis, serif; 
    font-size: 1.5em;
    line-height: 0.8em;
    text-align: justify;
    display: inline;
}

span {
    background-color: red;
    position: relative;
}

请参阅小提琴http://jsfiddle.net/3uzbV/42/

Answer 3

将以下属性添加到具有红色背景的范围中：

display: inline-block;

例如：

div {
    font-family: Charis, serif;
    font-size: 1.5em;
    line-height: 0.8em;
    text-align: justify;
}

span {
    background-color: red;
    display: inline-block;
}

<div>Litwo! Ojczyzno moja! Ty jesteś jak zdrowie. Ile cię stracił. Dziś człowieka nie biegł sług i dobył książeczkę z liczby kopic, co pod bramę. We dworze jak pieniądze Żydzi. To mówiąc spojrzał zyzem, gdzie mieszkał, dzieckiem będąc, przed laty, nad niego ze cztery. Tymczasem na swym dworze. Nikt go przez okienic szpar i kłopotach, i stanęli kołem. W biegu dotknęła blisko dwadzieści i bawi się strzelbami a Pan świata wie, jak zdrowe oblicz gospodarza, gdy zacność domu, fortuny szczodrot objaśniają wrodzone wdzięki i stoi wypisany każdy ksiądz toż samo gada na boku. Panny tuż na wieś i że polskie ubrani wysmukłą postać kształtną i gałęzie drzewa cały las i raptem boczne drzwi od <span> płaczącej matki pod Napoleonem, demokrata przyjechał z nieba dochodziło mniej zgorszenia. Ach, ja wam służyć, moje panny Róży a oni tak się i, czyje były, odgadywał. Przypadkiem oczy podniósł, i gestami ją nudzi rzecz długa, choć młodzież teraźniejsza, Że tym bielsze, że nam, kolego! lecz w ziemstwie, potem się czerwieni.</span> Twarzy wówczas nie korzystał dworze jak naoczne świadki. I Wojski z Warszaw mam list, to mówiąc, że.</div>

Answer 4

这很简单，只需使用：

display: inline-block;

在您的CSS中进行跨距操作

背景颜色涵盖了上一行

4 个答案: