任何人都可以帮助我在一些文本上使用背景颜色。
我希望背景颜色具有文本高度的大约40-50%,并且如果文本分成另一行,则跟踪文本的其余部分。有任何想法吗?
我曾尝试使用:before
和:after
选择器,但遗憾的是我没有得到我想要的结果。
我也尝试在h1标签中使用span,给它背景颜色和特定高度,但也没有。关于这个的任何想法?
我希望背景颜色大约是文本高度的40-50%
我想基本上实现这个目标:
不确定我是否正确阅读了您的问题,但是您希望文本标签具有背景颜色,您可以始终将背景放在父元素上或在文本标签上使用填充。
<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>
根据我的理解你的问题,这个片段可能会帮助你。 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>
应用这个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>