meta data for this page
  •  

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

下次修改 		前次修改
generators:transparent-color [2020/12/15 14:06]
ghsrobert 建立 		generators:transparent-color [2023/03/02 09:33] (目前版本)
ghsrobert 更新輸入方式，以及搭配的轉碼工具
行 2: 行 2:
 假設我們想要看到 A 色，又希望它是半透明的，但以 HTML 而言，下了某個 alpha 值，顏色勢必變淡走樣。所以，反而需要找到一個「B 色」，既能夠具備所要的透明度，而且色澤看來又跟 A 色一模一樣。 假設我們想要看到 A 色，又希望它是半透明的，但以 HTML 而言，下了某個 alpha 值，顏色勢必變淡走樣。所以，反而需要找到一個「B 色」，既能夠具備所要的透明度，而且色澤看來又跟 A 色一模一樣。
  
-雖然網路上有人貼出相關函數（說是數學內插法，我不懂），但我用 Excel 計算並沒有成功 :s 所幸，有人分享，在「Stylus」這個 CSS framework 中，有個 ''transparentify()'' 函數就可達到這個效果。可在下面的「Try Stylus」頁面中，輸入不同的數值來借它計算！ +雖然網路上有人貼出相關函數（說是數學內插法，我不懂）(([[https://stackoverflow.com/questions/12228548/finding-equivalent-color-with-opacity|css - Finding "equivalent" color with opacity - Stack Overflow]]))，但我用 Excel 計算並沒有成功 :s 所幸，有人分享，在「Stylus」這個 CSS framework 中，有個 ''transparentify()'' 函數就可達到這個效果。可在下面的「Try Stylus」頁面中，輸入不同的數值來借它計算！ 
-[[https://stylus-lang.com/try.html#?code=body%20%7B%0A%20%20font%3A%2014px%2F1.5%20Helvetica%2C%20arial%2C%20sans-serif%3B%0A%20%20background-color%3A%20transparentify(%23d2dfd0%2C%23ffffff%2C0.85)%0A%20%20%23logo%20%7B%0A%20%20%20%20border-radius%3A%205px%3B%0A%20%20%7D%0A%7D]]+/-<span ex>[[https://stylus-lang.com/try.html#?code=transparentify(%23FAFF50%2C%23ffffff%2C0.50)]]</span>-/ 
 +現在無法用 URL 直接填入代碼了，必須手動輸入<div ex><code javascript>transparentify(#d2dfd0,0.2);</code></div> 
 + 
 +（另再搭配一個 [[https://www.rapidtables.com/convert/color/rgb-to-hex.html|RGB to Hex color converter]]） 
 + 
 +產生出來是 ''rgba(r,g,b,a)''，若要轉成 HEX ARGB ''AARRGGBB'' ☞ [[https://www.myfixguide.com/color-converter/|Color Converter - RGB, HEX, HSL, ARGB, RGBA]] 
 +（就可以再進一步轉成 Rime 用的 ''0xAABBGGRR''）