我正在尋找一種根據漸變百分比確定純色的方法?；旧暇拖裣聢D一樣我已經使用 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 值并使用它。然而，我忍不住認為必須有更好的編程方式來解決這個問題。任何幫助都會有用的。
2 回答
墨色風雨
TA貢獻1853條經驗 獲得超6個贊
計算兩種顏色之間的中間色是如此簡單
color1=rgb(ar,ag,ab)
color2=rgb(br,bg,bb)
color=rgb(ar+factor*(br-ar),ag+factor*(bg-ag),ab+factor*(bb-ab))
好吧，為了更輕松地計算因子，我們可以創建一系列 div。想象一下你有一個像這樣的漸變
background-image: linear-gradient(to right,#ff0000,#00ffff);
我去創建一系列顏色
colors2:any[]=[
{color:"#ff0000",porc:0},
{color:"#ff0000",porc:0},
{color:"#00ffff",porc:100},
]
看到我用 porc:0 重復了第一個元素
并變換添加 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)
})
所以我可以做一個 *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
}
其中函數 mouseMove 計算中間顏色
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中你可以看到三個漸變。每個漸變都有兩個水平 div，一個帶有使用 css 漸變的 div，下面是“模擬”div 與幾個 div 的組合。如果將鼠標移到最后一個上，您會看到顏色
嗶嗶one
TA貢獻1854條經驗 獲得超8個贊
一種想法是使漸變非常大，然后調整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 關注
- 174 瀏覽
添加回答
舉報
0/150
提交
取消