文本元素的背景色

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>

文本元素的背景色

Background-color on text elements

html

css

text

background-color