How do I remove a filter from the text in CSS?

Question

I was trying to fix this, but I guess nothing worked.

I tried to put the text in a div and then tried to remove the filter but it didn't work. Here is my HTML and CSS code:

.welcome {
  background-image: url('code.jpg');
  -webkit-filter: brightness(70%);
  filter: brightness(70%);
}

.head {
  filter: none;
  color: white;
}

<div class="welcome">
  <center>
    <h1 class="head">Relux OS</h1>
    <p class="head">Have the greatest experience.</p>
  </center>
</div>

Does this answer your question? [Remove CSS filter on child elements](https://stackoverflow.com/questions/51154171/remove-css-filter-on-child-elements) — Steffen, Feb 26 '23 at 15:48

score 0 · Answer 1 · answered Feb 26 '23 at 15:53

The problem here is the filter is applied on the element, and any elements inside it. Writing filter none in the elements inside doesn't do anything, filter is applied on the outer element.

You can put the background image in a before element with the filter.

.welcome {
  position: relative;
}

.welcome::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://picsum.photos/800/600');
  filter: brightness(70%);
}

.head {
  position: relative;
  color: white;
}

<div class="welcome">
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <center>
    <h1 class="head">Relux OS</h1>
    <p class="head">Have the greatest experience.</p>
  </center>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>

How do I remove a filter from the text in CSS?

1 Answers1