在文本元素的背景颜色

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

根据我的理解你的问题，这个片段可能会帮助你。 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>

Answer 3

应用这个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>