Home / Questions / 228423
Accepted
EMCode
Asked: 2020-01-10 09:42:00 +0800 CST 2020-01-10 09:42:00 +0800 CST

Apply css filter to parent container without affecting children

  • 772

Checking the site, I see that this question has been asked regularly before, the solution they propose is to reverse the property with selectors > *Sources: 1 2 3

I want the filter brightnessto darken the primary color primary-colornot to affect the white text in text-whitethe section footer.

I have a web template in which there is only one primary color (applied to navbars , buttons, footers , etc) and a secondary color that will always be gray by default.

I have to change this primary color at the request of the user, I have many users, and to give a bit of variety to it primary-color, I apply CSS filters (such as saturation to "brighten" the tone a bit, or brightness to lighten or darken the tone) . I know it's not the best way and there are alternatives like LESS in CSS which I can use @variablesto define values; Unfortunately, the site is already too advanced to switch to this option (Maybe in the future with more time and knowledge I will do it).

Using these filters I just have to change the hexadecimal value in primary-colorand that's it. (I'm not being lazy, it seriously saves me too much work and time).

This is what I currently have.

.primary-color{
background-color: #4285F4;
}

.primary-color .footer-copyright{
filter: brightness(50%);
}

.text-white{
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Footer -->
  <footer class="page-footer font-small primary-color darken-3">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="mb-5 flex-center">
            <p class="text-center">Redes Sociales</p>            
          </div>
        </div>
      </div>
    </div>

    <!-- Copyright -->
    <div class="footer-copyright text-center text-white py-3 primary-color">© Copyright</div>

  </footer>

And this is how I would like it to look:

Image

html

1 Answers

  1. Best Answer

    What the classmates tell you in the comments is very true, on the one hand use position: absolute, preferably in a separate class (as a "grandson").

    This is what I would do, it should be noted that the properties topand rightof the class .text-whitehave values ​​to adjust them to the esSO snippet , you must use different ones in your website, or assign a fixed width to that DIV, apply a left:50%and then with the property margin-leftyou give it a value that is half the width of the DIV.

    Or as you like and according to your need. Luck!

    .primary-color{
background-color: #4285F4;
}

.primary-color .footer-copyright{
filter: brightness(50%);
}

.text-white{
color: #fff;
position: absolute;
top: 30px;
right: 45%;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Footer -->
  <footer class="page-footer font-small primary-color darken-3">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="mb-5 flex-center">
            <p class="text-center">Redes Sociales</p>            
          </div>
        </div>
      </div>
    </div>

    <!-- Copyright -->
    <div class="footer-copyright py-3 primary-color">&nbsp;</div>
    <div class="text-white">© Copyright</div>

  </footer>

    UPDATE

    I propose another much simpler and easier option, without the need to create another div.

    Just changing one property of your CSS:

    filter: brightness(50%);

    By 

    background: rgba(0, 0, 0, 0.5);


    .primary-color {
  background-color: #4285F4;
}

.primary-color .footer-copyright {
  background: rgba(0, 0, 0, 0.5);
}

.text-white {
  color: #fff;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Footer -->
<footer class="page-footer font-small primary-color darken-3">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="mb-5 flex-center">
          <p class="text-center">Redes Sociales</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Copyright -->
  <div class="footer-copyright text-center text-white py-3 primary-color">© Copyright</div>

</footer>

    • 2