Clash Royale CLAN TAG#URR8PPP

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:

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

Opacity is not what I'm looking for.

lighten()

4 Answers
4

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

background-color

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

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

filter

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

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*/



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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.