Dynamically change color to lighter or darker by percentage CSS (Javascript)

后端未结

关注

 24  1664

We have a big application on the site and we have a few links which are, let\'s say blue color like the blue links on this site. Now I want to make some other links, but wit

相关标签:

24条回答

被撕碎了的回忆

2020-11-28 01:31
If you want darker color, you can use rgba black with low opacity:
```
rgba(0,0,0,0.3)
```
For lighter use white:
```
rgba(255,255,255,0.3).
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2020-11-28 01:31
As far as I know, there's no way you can do this in CSS.

But I think that a little server-side logic could easily do as you suggest. CSS stylesheets are normally static assets, but there is no reason they couldn't be dynamically generated by server-side code. Your server-side script would:
1. Check a URL parameter to determine the user and therefore the user's chosen colour. Use a URL parameter rather than a session variable so that you can still cache the CSS.
2. Break up the colour into its red, green and blue components
3. Increment each of the three components by a set amount. Experiment with this to get the results you are after.
4. Generate CSS incorporating the new colour
Links to this CSS-generating page would look something like:
```
<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">
```
If you don't use the .css extension be sure to set the MIME-type correctly so that the browser knows to interpret the file as CSS.

(Note that to make colours lighter you have to raise each of the RGB values)
0 讨论(0)
发布评论:

提交评论
- 加载中...

天命终不由人

2020-11-28 01:33

Bringing it all together, a table solution done purely with DIV and CSS, try it ;) The browser should support RGBA colors though....

<head>
<style>
    .colored-div-table {
        display: table;
        table-layout: fixed;
    }
    .colored-div-table #col {
        display: table-column;
    }
    .colored-div-table #col:nth-child(odd) {
    }
    .colored-div-table #col:nth-child(even) {
    }
    .colored-div-table #col:nth-child(1){
        background-color: lightblue;
        width: 50px !important;
    }
    .colored-div-table #col:nth-child(2){
        background-color: lightyellow;
        width: 200px !important;
    }
    .colored-div-table #col:nth-child(3){
        background-color: lightcyan;
        width: 50px !important;
    }
    .colored-div-table #row {
        display: table-row;
    }
    .colored-div-table #row div {
        display: table-cell;
    }
    .colored-div-table #row div:nth-child(1) {

    }
    .colored-div-table #row div:nth-child(2) {
    }
    .colored-div-table #row div:nth-child(3) {
    }
    .colored-div-table #row:nth-child(odd) {
        background-color: rgba(0,0,0,0.1)
    }
    .colored-div-table #row:nth-child(even) {
    }
</style>
</head>
<body>

<div id="divtable" class="colored-div-table">
    <div id="col"></div>
    <div id="col"></div>
    <div id="col"></div>  

    <div id="row">
        <div>First Line</div><div>FL C2</div><div>FL C3></div>
    </div>

    <div id="row">
        <div>Second Line</div><div>SL C2</div><div>SL C3></div>
    </div>

    <div id="row">
        <div>Third Line</div><div>TL C2</div><div>TL C3></div>
    </div>

    <div id="row">
        <div>Forth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Eight Line</div><div>EL C2</div><div>EL C3></div>
    </div>
    <div id="row">
        <div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
    </div>
    <div id="row">
        <div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
    </div>

</div>
</body>

0 讨论(0)

盖世英雄少女心

2020-11-28 01:35

If you only need to change background color, this is a great approach that is futureproof - Use linear-gradient method on background image!

Check out the example below:

document
  .getElementById('colorpicker')
  .addEventListener('change', function(event) {
    document
      .documentElement
      .style.setProperty('--color', event.target.value);
  });

span {
  display: inline-block;
  border-radius: 20px;
  height: 40px;
  width: 40px;
  vertical-align: middle;
}

.red {
  background-color: red;
}

.red-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) red;
}

:root {
  --color: lime;
}

.dynamic-color {
  background-color: var(--color);
}

.dynamic-color-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) var(--color);
}

<table>
  <tr>
    <td><strong>Static Color</strong></td>
    <td><span class="red"></span></td>
    <td><span class="red-darker"></span></td>
  </tr>
  <tr>
    <td><strong>Dynamic Color</strong></td>
    <td><span class="dynamic-color"></span></td>
    <td><span class="dynamic-color-darker"></span></td>
  </tr>
</table>
<br/>
Change the dynamic color: <input id="colorpicker" value="#00ff00" type="color"/>

Credits: https://css-tricks.com/css-custom-properties-theming/

0 讨论(0)

無奈伤痛

2020-11-28 01:35
One outdated simple answer (in 2013) was to use a 50% transparent white PNG over the color:
```
div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}
```
Where lighten.png is a PNG of a white fill with 50% transparency.

There's much better ways to do this today. I hope people stop commenting now.
0 讨论(0)
发布评论:

提交评论
- 加载中...
时光说笑

2020-11-28 01:37
I found a PHP class that let me do this server side. I just output an inline CSS color style for whatever I need to be lighter/darker. Works great.

http://www.barelyfitz.com/projects/csscolor/

_{(note that the class uses PEAR for throwing errors, but I didn't want to include PEAR just to modify colors, so I just removed all the PEAR references)}

I turned it into a static class with static methods so I can call "lighten" & "darken" functions directly without creating a new object.

Sample usage:
```
$original_color = 'E58D8D';  
$lighter_color = Css::lighten($original_color, .7);  
$darker_color = Css::darken($original_color, .7);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...