CODEWITHSUNDEEP
htmlcss
Jjkivai
Jjkivai

Reputation: 157

Is there a way to make the text bright and the background dark?

I would like a dark background with bright text, but the linear gradient and/or filter is making the entire div dark. Is there a way to archive both? 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;
}

Upvotes: 0

Views: 1581

Answers (2)

Joseph Corrado
Joseph Corrado

Reputation: 25

So what I’ve done to lighten my background picture is used

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

Maybe use something similar but to darken in the css of your background and try it for your text as well?

Upvotes: 1

Jake B.
Jake B.

Reputation: 444

Yes this is possible; if you remove the alpha channel from the rgba of the banner background; it will remove the opacity that is applied over the top of all the child elements.

Then remove the filter css properties from both banner text and banner heading this will then remove filtering effect on both text elements, leaving the colour to appear as expected. Please see below:

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

Upvotes: 1

Related Questions