文字元素的背景色

Question

有人能帮我解决某些文本的背景色问题吗？

我希望背景颜色具有文本高度的40％至50％，如果文本分成另一行，则要跟进其余文本。有什么想法吗？

我尝试使用:before和:after选择器，但是不幸的是我没有得到想要的结果。

我还尝试过在h1标签内使用span，为它提供背景颜色和特定的高度，但是也没有。 关于这个有什么想法吗？

我希望背景色具有文字高度的40-50％

我基本上想实现以下目标：

Answer 1

不确定我是否正确阅读了您的问题，但是您希望文本标签具有背景色，则可以始终将背景放在父元素上或在文本标签上使用填充。

<h1 style="padding: 2em; background: red;">Sample Text</h1>

或

<div style="padding: 2em; background: red;">
 <p>Sample Text</p>
</div>

这是您要实现的目标吗？

编辑：以下是您要寻找的内容。

.container {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.half-highlight {
  font-size: 30px;
  
  background-image: linear-gradient(to right, transparent 50%, green 50%);
  background-origin: 0;
  background-size: 200% 50%;
  background-repeat: repeat-x;
  background-position: 0 100%;
  transition: background-position 0.5s;
}

.half-highlight {
  background-position: -100% 100%;
}

<div class="container">
  <span class="half-highlight">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, error tenetur, nihil tempore illum nulla aliquid debitis nostrum sequi harum possimus commodi unde iusto rerum temporibus? Consequatur porro cumque similique.
  </span>
</div>

<div class="test"></div>

Answer 2

应用此CSS可能会为您工作。

 p {
    border: none;
    color: #000;
    width: auto;
    height: 48px;
    font-size: 32px;
    position: relative;
    box-sizing: border-box;
}
p:before{
    content: '';
    width: -webkit-fill-available;
    height: 40%;
    background: #ff00006e;
    position: absolute;
    left: 0px;
    top: 0px;
}

HTML来到这里...

<p>This is a paragraph.</p>

Answer 3

根据我对您提出的问题的了解， 该代码片段可能会对您有所帮助。 Sliced Text Using Background Clip

.text-grad-1 {
    font-size: 80px;
    color: #ff0000;
    background: linear-gradient(to bottom, #ff00c3 0%,#ff00c3 50%,#ffffff 52%,#000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  margin: 0;
}
.text-grad-2 {
    position: relative;
    display: inline-block;
    text-align: center;
    font-size: 80px;
    color: #ff0000;
    background: linear-gradient(to bottom, #ff00c3 0%,#ff00c3 50%,#ffffff 52%,#000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 20px 0;
}
.text-grad-2:after {
    content:"";
    position: absolute;
    height: 22px;
    width: 100%;
    background: #ff00c3;
    transform: translateX(-50%);
    left: 50%;
    bottom: 32px;
    z-index: -1;
}

.text-grad-3 {
    position: relative;
    display: inline-block;
    text-align: center;
    font-size: 80px;
    color: #ff0000;
    background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}
.text-grad-3:after {
    content:"";
    position: absolute;
    height: 27px;
    width: 100%;
    background: #7cbc0a;
    transform: translateX(-50%);
    left: 50%;
    bottom: -2px;
    z-index: -1;
    margin: 20px 0;
}

<p class="text-grad-1">⟵ Sliced Text ⟶</p>
<br/>
<p class="text-grad-2">⟵ Sliced Text ⟶</p>
<br/>
<p class="text-grad-3"> Sliced Text </p>