Цвет фона на текстовые элементы - PullRequest
Новая
       31

Цвет фона на текстовые элементы

0 голосов
/ 19 апреля 2019

Может ли кто-нибудь помочь мне с цветом фона для некоторого текста.

Я бы хотел, чтобы цвет фона занимал около 40-50% высоты текста, и следил за остальной частью текста, еслитекст разбивается на другой ряд.Есть идеи?

Я пытался поиграться с селекторами :before и :after, но, к сожалению, я не получил желаемый результат.

Я также пытался использовать span в теге h1, давая ему цвет фона и конкретную высоту, но ничего не получалось.Есть какие-нибудь идеи по этому поводу?

Я хочу, чтобы цвет фона занимал около 40-50% высоты текста

Я хочу добиться по существу этого:

Example of what i want to achieve

Ответы [ 3 ]

0 голосов
/ 19 апреля 2019

Примените этот 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>
0 голосов
/ 19 апреля 2019

Из того, что я понял по вашему вопросу, этот фрагмент может вам помочь. Нарезанный текст с использованием фонового клипа 

.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>
0 голосов
/ 19 апреля 2019

Не уверен, что я правильно прочитал ваш вопрос, однако если вы хотите, чтобы текстовый тег имел цвет фона, вы всегда можете поместить фон на родительский элемент или использовать отступ для текстового тега. 

<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>
...