Цвет фона текстовых элементов
Может ли кто-нибудь помочь мне с фоновым цветом для некоторого текста.
Я хотел бы, чтобы цвет фона составлял около 40-50% высоты текста и следовал за остальной частью текста, если текст разбивается на другую строку. Есть идеи?
Я пытался поиграть с селекторами :before и :after, но, к сожалению, не получил желаемого результата.
Я также пытался использовать span в теге h1, задавая ему цвет фона и определенную высоту, но ничего не получилось. Любые идеи по этому поводу?
Я хочу, чтобы цвет фона составлял около 40-50% высоты текста.
Я хочу добиться этого:
Ответы 3
Не уверен, правильно ли я прочитал ваш вопрос, однако вы хотите, чтобы текстовый тег имел цвет фона, вы всегда можете поместить фон в родительский элемент или использовать отступы в текстовом теге.
<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>Извините, это не так, посмотрите ответ Акшая Бавана. Вот тот эффект, которого я хочу.
Да, это так, большое спасибо. Извините за задержку с ответом, я был занят в эти дни. Спасибо еще раз! :)
Примените этот 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>
Где ты придумываешь кнопку во всем этом? Я знаю, что вопрос совершенно не по теме - в конечном итоге он будет удален - но я предполагаю, что вы обо всем этом догадываетесь, а ТАКОЕ - это не догадки.
Извините, я не был достаточно конкретным. Я хочу этот эффект, но по вертикали, а не по горизонтали. Но когда я использую before с абсолютным позиционированием, если мой текст разбивается на две строки, фон :before просто остается в верхней части относительного элемента (кнопки в данном случае). Я хочу, чтобы цвет фона соответствовал тексту.
@Rob Извините, я торопился, я думал, что он может понять процесс моего кода и, соответственно, он может исправить его в соответствии со своим требованием, и спасибо за ваше предложение.
@LazarRadovanovic, вы можете проверить это сейчас, я исправил в соответствии с вашим требованием
@internthings Спасибо, это так, но есть небольшая проблема с разбиением слов. У меня был тот же результат, фон остается поверх элемента <p> из-за абсолютного позиционирования.
Из того, что я понял из вашего вопроса, этот фрагмент может помочь вам. Нарезанный текст с использованием фонового клипа
.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>Это тот эффект, который мне нужен, но когда абзац состоит из двух строк, фоновый цвет элементов :after остается внизу из-за абсолютного позиционирования.
Я предлагаю вам проверить чей-то ответ как принятый ответ (вы получаете 2 бесплатных представителя, и посетителям будет легче найти свой ответ), я удалил свой предыдущий ответ, потому что считаю, что у вас уже есть правильный ответ.