国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

如何在CSS顏色變量中應用透明度?
P粉348088995
P粉348088995 2023-08-20 18:51:07
0
1
651
<p>我正在electron中設計一個應用程序,所以我可以訪問CSS變量。我在<code>vars.css</code>中定義了一個顏色變量:</p> <pre class="brush:css;toolbar:false;">:root { --color: #f0f0f0; } </pre> <p>我想在<code>main.css</code>中使用這個顏色,但要應用一些透明度:</p> <pre class="brush:css;toolbar:false;">#element { background: (以某種方式使用var(--color)并設置一些透明度); } </pre> <p>我該如何做到這一點?我沒有使用任何預處理器,只使用CSS。我更喜歡一個純CSS的答案,但我也可以接受JavaScript/jQuery的解決方案。</p> <p>我不能使用<code>opacity</code>,因為我正在使用一個不應該是透明的背景圖片。</p>
P粉348088995
P粉348088995

全部回復(1)
P粉458725040

您不能對現(xiàn)有的顏色值應用alpha通道。也就是說,您不能對現(xiàn)有的十六進制值(例如#f0f0f0)添加alpha分量,并將結(jié)果值與另一個屬性一起使用。

然而,自定義屬性允許您將十六進制值轉(zhuǎn)換為RGB三元組,以便與rgba()一起使用,將該值存儲在自定義屬性中(包括逗號!),使用var()將該值替換為具有所需alpha值的rgba()函數(shù),它將正常工作:

:root {
  /* #f0f0f0轉(zhuǎn)換為十進制RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}
<p id="element">如果您能看到這個,說明您的瀏覽器支持自定義屬性。</p>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板