Есть ли способ сделать текст ярким, а фон темным?

#html #css

#HTML #css

Вопрос:

Я хотел бы темный фон с ярким текстом, но линейный градиент и / или фильтр делают весь div темным. Есть ли способ архивировать оба? html (reactstrap)

       <div class="banner">
        <Container>
          <div class="banner-text">
            <div class="banner-heading">Glad to see you here !</div>
            <div class="banner-sub-heading">
              Here goes the secondary heading on hero banner
            </div>
          </div>
        </Container>
      </div>

css

 .banner {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/page/Front.jpg");
  filter: brightness(0.6);
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.banner-text {
  filter: brightness(1.75);
  padding: 200px 0 150px 0;
}
.banner-heading {
  filter: brightness(1.75);
  font-family: "Lobster", cursive;
  font-size: 75px;
  font-weight: 700;
  line-height: 100px;
  margin-bottom: 30px;
  color: #fff;
}

Ответ №1:

Да, это возможно; если вы удалите альфа-канал из rgba фона баннера; это удалит непрозрачность, которая применяется поверх всех дочерних элементов.

Затем удалите свойства CSS фильтра как из текста баннера, так и из заголовка баннера. Это приведет к удалению эффекта фильтрации для обоих текстовых элементов, в результате чего цвет будет отображаться так, как ожидалось. Пожалуйста, смотрите ниже:

 .banner {
  background: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)),
    url("../images/page/Front.jpg");
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.banner-text {
  padding: 200px 0 150px 0;
  color: white;
}
.banner-heading {
  font-family: "Lobster", cursive;
  font-size: 75px;
  font-weight: 700;
  line-height: 100px;
  margin-bottom: 30px;
  color: #ffff;
}

 <div class="banner">
  <Container>
    <div class="banner-text">
      <div class="banner-heading">Glad to see you here !</div>
      <div class="banner-sub-heading">
        Here goes the secondary heading on hero banner
      </div>
    </div>
  </Container>
</div>

Ответ №2:

Итак, то, что я сделал, чтобы осветлить фоновое изображение, используется

 background-color:rgba(255,255,255,0.2);
background-blend-mode: lighten;

Может быть, использовать что-то подобное, но затемнить в CSS вашего фона и попробовать это для вашего текста?