Задать вопрос
seregazolotaryow64
@seregazolotaryow64
IT Специалист и самоучка

Как добавить надпись на цветной фон?

Добрый день!
На данный момент решаю задачу, в которой мне нужно добавить надписи на фоны блоков в соответствии с этим макетом. У меня в навёрстанной версии страницы для блоков установлены только цвета фонов, но внутри фона(не внутри блока) пытаюсь реализовать те самые надписи из макета.
Но CSS3 какие фишки на этот счёт предлагает?
Заранее спасибо!
  • Вопрос задан
  • 105 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
  • beONmax
    Курс HTML / CSS
    1 месяц
    Далее
  • Бруноям
    Вёрстка на HTML и CSS
    3 месяца
    Далее
  • Международная Школа Профессий
    Онлайн-курсы HTML и CSS для начинающих
    3 недели
    Далее
  • Stepik
    Основы вёрстки с HTML и CSS
    1 неделя
    Далее
  • beONmax
    Верстальщик сайтов - HTML, CSS, Bootstrap, JavaScript
    1 месяц
    Далее
Решения вопроса 2
v3shin
@v3shin
Веб-шаман
Можно так:
#news:before {
    content: 'NEWS';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 200px;
    opacity: .2;
}
#news header,
#news main {
    position: relative;
    z-index: 1;
}

Ну, и стили настройте под себя.
Ответ написан
fallus
@fallus
[data-text]{
	position: relative;
}

[data-text]::before{
	content: attr(data-text);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	pointer-events: none;
  text-transform: uppercase;

	color: red;
	font-weight: 900;
	font-size: 50px;
}

[data-text] > *{
	position: relative;
	z-index: 2;
}


<section id="estate" class="section" data-text="Investment">
...
</section>
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы