CODEWITHSUNDEEP
csscolorsbackground
Raashid A.
Raashid A.

Reputation: 75

lighten the background colour from another class

Can we use lighten, Darken CSS attributes without colour value?

I have a class with the background colour Ex:

.master{
      background-color:green;
}

<div class="master">Master</div>

I have to lighten the background of the "Div" using a different CSS class. How can I do that?

Note:

  1. I have a few themes and predefined background colours so I have to use those colours and have a shade of it using a different class

  2. Opacity is not what I'm looking for.

Upvotes: 1

Views: 867

Answers (4)

Temani Afif
Temani Afif

Reputation: 272909

You can consider a pseudo element to create another layer and inherit the background-color then you can apply filter without any issue:

.master{
      background-color:green;
}
.master2{
      background-color:red;
}

.light,
.dark{
  position:relative;
  z-index:0;
}
.light:before,
.dark:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:inherit;
  filter:brightness(200%);
}
.dark:before {
  filter:brightness(50%);
}
<div class="master light">Master</div>
<div class="master2 light">Master</div>
<div class="master dark">Master</div>
<div class="master2 dark">Master</div>

Upvotes: 1

Viira
Viira

Reputation: 3911

This might help you, I think this is the only way to achieve your goal. As you can see both the images were same, no filter is applied to the content.

.master{
color:#fff;
position:absolute;
top:10px; 
left:10px;
}

.mmaster{
-webkit-filter: brightness(200%);
 background:green;  
 position:relative; 
 padding:80px 0;
 }
<div class="mmaster"></div>
<div class="master"><img src="https://www.w3schools.com/css/bgdesert.jpg" alt="desert">Desert</div>
<img src="https://www.w3schools.com/css/bgdesert.jpg">

Upvotes: 0

The Junior
The Junior

Reputation: 5

I think it is quite easy to add a different class so that you can lighten the background of your div element. Try this example,

.master-light{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97150

You can use the filter CSS property to tweak the brightness as follows:

.master {
  background-color: green;
}

.lighten {
  filter: brightness(150%);
}

.darken {
  filter: brightness(50%);
}
<div class="master">Master</div>
<div class="master lighten">Master lighten</div>
<div class="master darken">Master darken</div>

Upvotes: 0

Related Questions