我正在尋找一種根據(jù)漸變百分比確定純色的方法?；旧暇拖裣聢D一樣我已經(jīng)使用 CSS 來獲取漸變，但我不知道如何從該漸變中選擇純色。這是漸變的 CSS：background-image: linear-gradient(to bottom, #00b050 20%, #4ac148 40%, #74d13e, #9de031, #c6ee21, #dbe508, #eedb00, #ffd000, #ffad00, #ff8700, #ff5b00, #ff0000);最壞的情況是，我可以在該漸變上遍歷并分配 0-100 之間的 RGB 值并使用它。然而，我忍不住認(rèn)為必須有更好的編程方式來解決這個(gè)問題。任何幫助都會(huì)有用的。
2 回答
墨色風(fēng)雨
TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超6個(gè)贊
計(jì)算兩種顏色之間的中間色是如此簡單
color1=rgb(ar,ag,ab)
color2=rgb(br,bg,bb)
color=rgb(ar+factor*(br-ar),ag+factor*(bg-ag),ab+factor*(bb-ab))
好吧，為了更輕松地計(jì)算因子，我們可以創(chuàng)建一系列 div。想象一下你有一個(gè)像這樣的漸變
background-image: linear-gradient(to right,#ff0000,#00ffff);
我去創(chuàng)建一系列顏色
colors2:any[]=[
{color:"#ff0000",porc:0},
{color:"#ff0000",porc:0},
{color:"#00ffff",porc:100},
]
看到我用 porc:0 重復(fù)了第一個(gè)元素
并變換添加 r、g、b 屬性
this.colors2.forEach(c=>{
c.r=parseInt(c.color.substr(1,2),16)
c.g=parseInt(c.color.substr(3,2),16)
c.b=parseInt(c.color.substr(5),16)
})
所以我可以做一個(gè) *ngFor
<div class="col" (mousemove)="mouseMove($event,colors2[i],colors2[i+1])"
*ngFor="let color of colors2|slice:0:(colors2.length-1);let i=index"
[style.background-image]="'linear-gradient(to right,'+colors2[i].color+','+colors2[i+1].color+')'"
[style.width]="(colors2[i+1].porc-colors2[i].porc)+'%'">
</div>
在哪里
.col
{
height:2rem;
display:inline-block
}
其中函數(shù) mouseMove 計(jì)算中間顏色
mouseMove(e,color1,color2)
{
this.margin=e.clientX-14
const rect=e.target.getBoundingClientRect();
const alfa=(e.clientX - rect.left)/rect.width
const r=Math.floor(color1.r+alfa*(color2.r-color1.r)).toString(16)
const g=Math.floor(color1.g+alfa*(color2.g-color1.g)).toString(16)
const b=Math.floor(color1.b+alfa*(color2.b-color1.b)).toString(16)
const color=('00'+r).slice(-2)+('00'+g).slice(-2)+('00'+b).slice(-2)
this.result="#"+color
}
在stackblitz中你可以看到三個(gè)漸變。每個(gè)漸變都有兩個(gè)水平 div，一個(gè)帶有使用 css 漸變的 div，下面是“模擬”div 與幾個(gè) div 的組合。如果將鼠標(biāo)移到最后一個(gè)上，您會(huì)看到顏色
嗶嗶one
TA貢獻(xiàn)1854條經(jīng)驗(yàn) 獲得超8個(gè)贊
一種想法是使?jié)u變非常大，然后調(diào)整background-position為具有一種顏色或至少近似它：
.box {
background-image: linear-gradient(to right, #00b050 20%, #4ac148 40%, #74d13e, #9de031, #c6ee21, #dbe508, #eedb00, #ffd000, #ffad00, #ff8700, #ff5b00, #ff0000);
background-size:10000% 100%;
border:10px solid;
width:50px;
height:100px;
display:inline-block;
}
<div class="box" style="background-position:20% 0"></div>
<div class="box" style="background-position:40% 0"></div>
<div class="box" style="background-position:50% 0"></div>
<div class="box" style="background-position:60% 0"></div>
<div class="box" style="background-position:70% 0"></div>
<div class="box" style="background-position:80% 0"></div>
<div class="box" style="background-position:100% 0"></div>
- 2 回答
- 0 關(guān)注
- 169 瀏覽
添加回答
舉報(bào)
0/150
提交
取消