Avoid inheriting of parent's css effect

Question

Hi I have <div class="jumbotron text-center"><nav>something</nav></div> this line of code and the jumbotron has some CSS effects something like

.jumbotron{
    background: url("image-url") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-size: cover;
    height: 78vh;
    filter: brightness(50%);
}

but all I want is only the jumbotron's background image gets the CSS effects, not the nav tag. currently, the nav tag inherits thefilter: brigtness (50%), is there anyway only the background-image gets the effect?

tao · Accepted Answer · 2019-06-02T00:52:35.973

No, it's not possible. A filter will affect current element with all its contents (including children).

Therefore the way to go here is to move <nav> outside of .jumbotron, wrap them in a common relative parent and render <nav> above .jumbotron.
Proof of concept:

.relative {
  position: relative;
}
.relative > .absolute {
  position: absolute;
  width: 100%;
  top: 0;
  /* making it visible */
  background-color: rgba(255,255,255,.25);
  border-bottom: 1px solid white;
  color: white;
  padding: 1rem;
  box-sizing: border-box;
}

.jumbotron{
  background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover; 
  height: 78vh;
  filter: brightness(50%);
}

<div class="relative">
  <div class="jumbotron"></div>
  <nav class="absolute">something</nav>
</div>

Feel free to rename the classes and adjust to your particular needs.

Avoid inheriting of parent's css effect

1 Answers1