網(wǎng)站導(dǎo)航

根據(jù)CSS百分比動(dòng)態(tài)地將顏色變淺或變深

我們?cè)诰W(wǎng)站上有一個(gè)大的應(yīng)用程序，我們有幾個(gè)鏈接，比如說(shuō)藍(lán)色，就像這個(gè)網(wǎng)站上的藍(lán)色鏈接。現(xiàn)在我想做一些其他的鏈接，但是顏色要淺一些。顯然，我可以簡(jiǎn)單地在CSS文件中添加十六進(jìn)制代碼，但我們的網(wǎng)站讓用戶(hù)決定他們定制的個(gè)人資料/網(wǎng)站(如Twitter)需要什么顏色。

所以，我的問(wèn)題是:我們能按百分比減少顏色嗎？

假設(shè)下面的代碼是CSS:

a {
  color: blue;
}
    
a.lighter {
  color: -50%; /* obviously not correct way, but just an idea */
}

運(yùn)籌學(xué)

a.lighter {
  color: blue -50%;  /* again not correct, but another example of setting color and then reducing it */
}

有沒(méi)有辦法把一種顏色減少一個(gè)百分比？

你可以在所有現(xiàn)代瀏覽器中使用CSS過(guò)濾器來(lái)做到這一點(diǎn)(參見(jiàn)caniuse兼容性表)。

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

<button class="button">Foo lorem ipsum</button>

自2020年1月以來(lái)，所有現(xiàn)代瀏覽器都擁有100%的過(guò)濾器支持。甚至安卓系統(tǒng)的UC瀏覽器(而不是80美元手機(jī)上的Chrome)也支持它。

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

此外，您可以使用CSS變量動(dòng)態(tài)控制這一點(diǎn)，自2017年10月以來(lái)，大多數(shù)瀏覽器都支持CSS變量(不包括QQ):

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

這不是我的項(xiàng)目，但這是一個(gè)很好的例子，展示了現(xiàn)代CSS有多偉大，請(qǐng)看:MVP.css

原答案如果您使用的堆棧允許您使用Sass或更少的Sass，您可以使用減輕功能:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

也有黑暗做同樣的事，但在相反的方向。

有“不透明” 這將使背景閃閃發(fā)光:

opacity: 0.5;

但我不確定這是你的意思。定義“減色”:使透明？還是加白？

在撰寫(xiě)本文時(shí)，這里是我發(fā)現(xiàn)的最好的純CSS顏色處理實(shí)現(xiàn):

使用CSS變量以HSL而不是HEX/RGB格式定義顏色，然后使用calc()來(lái)操作它們。

這里有一個(gè)基本的例子:

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);

  --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

  --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
  --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}

.flex {
  display: flex;
}

.flex > div {
  flex: 1;
  height: calc(100vw / 10);
}

<h3>Color Manipulation (alpha)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-10)"></div>
  <div style="background-color: var(--link-color-20)"></div>
  <div style="background-color: var(--link-color-30)"></div>
  <div style="background-color: var(--link-color-40)"></div>
  <div style="background-color: var(--link-color-50)"></div>
  <div style="background-color: var(--link-color-60)"></div>
  <div style="background-color: var(--link-color-70)"></div>
  <div style="background-color: var(--link-color-80)"></div>
  <div style="background-color: var(--link-color-90)"></div>
  <div style="background-color: var(--link-color)"></div>
</div>

<h3>Color Manipulation (Hue)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-warm)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-cold)"></div>
</div>

<h3>Color Manipulation (Saturation)</h3>

<div class="flex">
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-low)"></div>
  <div style="background-color: var(--link-color-lowest)"></div>
</div>

<h3>Color Manipulation (Lightness)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-light)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-dark)"></div>
</div>

HSL顏色提供了一個(gè)答案， hsl顏色值由HSL(色調(diào)、飽和度%、亮度%)指定。

IE9+、Firefox、Chrome、Safari和Opera 10+都支持HSL

a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}

使用filter pure CSS屬性。關(guān)于過(guò)濾器屬性函數(shù)的完整描述，請(qǐng)閱讀這篇精彩的文章。

我也有和你一樣的問(wèn)題，我通過(guò)使用濾鏡屬性的亮度函數(shù)解決了它:

.my-class {
  background-color: #18d176;
  filter: brightness(90%);
}

這是一個(gè)老問(wèn)題，但是大部分的答案都需要使用一個(gè)預(yù)處理器或者JavaScript來(lái)操作，或者它們不僅影響元素的顏色，還影響其中包含的元素的顏色。我將添加一種復(fù)雜的CSS-唯一的方法來(lái)做同樣的事情。大概以后有了更高級(jí)的CSS函數(shù)，就更好辦了。

這個(gè)想法是基于使用:

RGB顏色，所以紅色、綠色和藍(lán)色有單獨(dú)的值； CSS變量，存儲(chǔ)顏色值和暗度；和 calc函數(shù)，用于應(yīng)用更改。默認(rèn)情況下，暗度為1(100%，常規(guī)顏色)，如果乘以一個(gè)0到1之間的數(shù)，顏色會(huì)變得更暗。例如，如果每個(gè)值都乘以0.85，顏色會(huì)變暗15%(100%-15% = 85% = 0.85)。

下面是一個(gè)例子，我創(chuàng)建了三個(gè)類(lèi):。黑暗，。更黑暗而且。最暗將使原始顏色分別暗25%、50%和75%:

html {
  --clarity: 1;
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  font-family: arial, sans-serif;
  font-size: 20px;
  background: rgba(
                  calc(var(--r) * var(--clarity)), 
                  calc(var(--g) * var(--clarity)), 
                  calc(var(--b) * var(--clarity))
                );
}

.dark    { --clarity: 0.75; }
.darker  { --clarity: 0.50; }
.darkest { --clarity: 0.25; }

.red {
  --r: 255;
  --g: 0;
  --b: 0;
}

.purple {
  --r: 205;
  --g: 30;
  --b: 205;
}

<div class="red">0%</div>
<div class="red dark">25%</div>
<div class="red darker">50%</div>
<div class="red darkest">75%</div>

<br/><br/>

<div class="purple">0%</div>
<div class="purple dark">25%</div>
<div class="purple darker">50%</div>
<div class="purple darkest">75%</div>

在LESS中，您將使用以下變量:

@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);

這將采取第一個(gè)變量，并減輕20%(或任何其他百分比)。在這個(gè)例子中，你最終得到的淺色是:#ccc

如果您想要更深的顏色，您可以使用低不透明度的rgba黑色:

rgba(0, 0, 0, 0.3);

對(duì)于打火機(jī)使用白色:

rgba(255, 255, 255, 0.3);

如果你決定使用http://compass-style.org/,一個(gè)基于sass的css框架，它提供了非常有用的darken()和lighten() sass函數(shù)來(lái)動(dòng)態(tài)生成css。非常干凈:

@import compass/utilities

$link_color: #bb8f8f
a
  color: $link_color
a:visited
  color: $link_color
a:hover
  color: darken($link_color,10)

產(chǎn)生

a {
  color: #bb8f8f;
}

a:visited {
  color: #bb8f8f;
}

a:hover {
  color: #a86f6f;
}

如果你只需要改變背景顏色，這是一個(gè)非常好的方法，在背景圖片上使用線性漸變的方法。

看看下面的例子:

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

據(jù)我所知，你不可能在CSS中做到這一點(diǎn)。

但是我認(rèn)為一點(diǎn)點(diǎn)服務(wù)器端的邏輯可以很容易地按照你的建議去做。CSS樣式表通常是靜態(tài)資產(chǎn)，但是沒(méi)有理由它們不能由服務(wù)器端代碼動(dòng)態(tài)生成。您的服務(wù)器端腳本將:

檢查URL參數(shù)以確定用戶(hù)，從而確定用戶(hù)選擇的顏色。使用URL參數(shù)而不是會(huì)話變量，這樣您仍然可以緩存CSS。把顏色分解成紅、綠、藍(lán)三種顏色以設(shè)定的量增加三個(gè)分量中的每一個(gè)。嘗試這樣做可以得到你想要的結(jié)果。生成包含新顏色的CSS 到這個(gè)CSS生成頁(yè)面的鏈接看起來(lái)像這樣:

<link rel="stylesheet" >

如果你不使用。css擴(kuò)展名確保正確設(shè)置MIME類(lèi)型，以便瀏覽器知道將文件解釋為CSS。

(注意，要使顏色變淺，您必須提高每個(gè)RGB值)

您可以使用一點(diǎn)javascript來(lái)通過(guò)rgb()計(jì)算較深和較淺的顏色。

不太好，但這只是為了說(shuō)明。

它主要做的是設(shè)置一種顏色，并選擇20種顏色，這20種顏色具有相同的rgb數(shù)量(相互比較),僅相差10。

for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
 var r = 91;
 var g = 192;
 var b = 222;
 $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+   (i*10))      );
};

不是直接的，沒(méi)有。但是你可以使用一個(gè)網(wǎng)站，比如colorschemedesigner.com，它會(huì)給你你的基色，然后給你不同基色范圍的十六進(jìn)制和rgb代碼。

一旦我為我的站點(diǎn)找到了配色方案，我就將顏色的十六進(jìn)制代碼放入樣式表頂部的注釋部分并命名它們。

其他一些配色方案生成器包括:

http://www.colorschemer.com/online.html http://colorschemegenerator.com/ http://www . CSS juice . com/25-popular-color-scheme-and-palette-generators/ 如果你需要強(qiáng)行兼容舊的瀏覽器，你可以使用Colllor來(lái)自動(dòng)選擇相似的顏色變化。

示例(顏色:# a9dbb4):

你可以使用RGBa(“a”是alpha透明度)，但是它還沒(méi)有得到廣泛的支持。但是，它將會(huì)是，所以您現(xiàn)在可以使用它并添加一個(gè)后備:

a:link { 
    color: rgb(0,0,255); 
    }
a:link.lighter {
    color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
    }
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
    color: rgba(0,0,255,0.5); /* last value is transparency */
    }

我使用原始的CSS3和SVG添加一個(gè)答案，不需要LESS或SASS。

基本上，如果問(wèn)題是為了全局懸停效果使顏色變亮或變暗10%、25%、50%,你可以創(chuàng)建一個(gè)這樣的SVG數(shù)據(jù)調(diào)用

:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;

}

.myButton{
    color: white;
    background-color:blue;
}
.myButton:hover{
    background-image: var(--lighten-bg);
}

出于某種我不知道的原因，SVG不允許我在“fill”屬性中輸入十六進(jìn)制值，但是“white”和“black”滿足了我的需要。

思考的食糧: 如果你不介意使用圖像，就使用50%透明的PNG作為背景圖像。如果你想變得更有趣，調(diào)用一個(gè)PHP腳本作為背景圖像，給它傳遞十六進(jìn)制和不透明度值，讓它吐出上面的SVG代碼。

下面的代碼對(duì)我來(lái)說(shuō)變暗的顏色-只是改變懸停50%

.button {
  display: inline-block;
  background-color: green;
}

.button:hover {
  background-image: linear-gradient(rgb(0 0 0/50%) 0 0);
}

嘗試:

a {
  color: hsl(240, 100%, 50%);
}

a:hover {
  color: hsl(240, 100%, 70%);
}

綜合起來(lái)，一個(gè)純粹用DIV和CSS做的表格解決方案，試試吧；)瀏覽器應(yīng)該支持RGBA顏色....

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

我知道已經(jīng)晚了，但是你可以用一個(gè)包裝器來(lái)包裝你的按鈕，并改變一個(gè)rgba顏色函數(shù)的不透明度，就像在其他回答中說(shuō)的那樣，但沒(méi)有明確的例子。

這里有一支筆:

https://codepen.io/aronkof/pen/WzGmjR

#wrapper {
  width: 50vw;
  height: 50vh;
  background-color: #AAA;
  margin: 20px auto;
  border-radius: 5px;
  display: grid;
  place-items: center;
} 

.btn-wrap {
  background-color: #000;
  display: inline-block;
}

button {
  transition: all 0.6s linear;
  background-color: rgba(0, 255, 0, 1);
  border: none;
  outline: none;
  color: #fff;
  padding: 50px;
  font-weight: 700;
  font-size: 2em;
}

button:hover {
  background-color: rgba(0, 255, 0, .5);
}

<div id="wrapper">
  <div class="btn-wrap">
    <button class="btn">HEY!</buutton>
  </div>
</div>

一個(gè)過(guò)時(shí)的簡(jiǎn)單答案(2013年)是在顏色上使用50%透明的白色PNG:

div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}

其中l(wèi)ighten.png是一個(gè)50%透明度的白色填充的PNG。

今天有更好的方法來(lái)做這件事。我希望人們現(xiàn)在停止評(píng)論。

見(jiàn)我對(duì)Ctford回復(fù)的評(píng)論。

我認(rèn)為使顏色變亮的簡(jiǎn)單方法是將每個(gè)RGB分量加到0xff上，然后除以2。如果這沒(méi)有給出您想要的確切結(jié)果，就用0xff減去當(dāng)前值乘以某個(gè)常數(shù)，然后再加回當(dāng)前值。例如，如果您想將1/3的路徑移向白色，則取(0xff - current)/3+current。

你不得不玩它，看看你得到了什么結(jié)果。我擔(dān)心，用這個(gè)簡(jiǎn)單的公式，一個(gè)足夠大的因子可以使深色很好地褪色，可能會(huì)使淺色完全變白，而一個(gè)足夠小的因子只能使淺色變淺一點(diǎn)，可能會(huì)使深色變得不夠亮。

盡管如此，我認(rèn)為走一小段路比走固定的步數(shù)更有希望。

我找到了一個(gè)PHP類(lèi)，它讓我在服務(wù)器端做這個(gè)。我只是輸出一個(gè)內(nèi)聯(lián)的CSS顏色樣式，無(wú)論我需要更亮/更暗。很好。

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

(注意，該類(lèi)使用PEAR來(lái)拋出錯(cuò)誤，但是我不想僅僅為了修改顏色而包含PEAR，所以我只是刪除了所有的PEAR引用)

我用靜態(tài)方法把它變成了一個(gè)靜態(tài)類(lèi)，這樣我就可以調(diào)用" lighten "了。“變暗”直接起作用，無(wú)需創(chuàng)建新對(duì)象。

示例用法:

$original_color = 'E58D8D';  
$lighter_color = Css::lighten($original_color, .7);  
$darker_color = Css::darken($original_color, .7);

上一篇c 類(lèi)轉(zhuǎn)為json字符串

下一篇c 類(lèi)轉(zhuǎn)換為json字符串?dāng)?shù)組嗎

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網(wǎng)站導(dǎo)航

網(wǎng)站導(dǎo)航

網(wǎng)站分類(lèi)

根據(jù)CSS百分比動(dòng)態(tài)地將顏色變淺或變深

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網(wǎng)站導(dǎo)航

網(wǎng)站導(dǎo)航

網(wǎng)站分類(lèi)

根據(jù)CSS百分比動(dòng)態(tài)地將顏色變淺或變深

相關(guān)文章