Elektronda bir uygulama tasarlıyorum, bu yüzden CSS değişkenlerine erişimim var. Ben bir renk değişkeni tanımladı vars.css:

:root {
  --color: #f0f0f0;
}

Bu rengi kullanmak istiyorum main.css, ancak bazı opaklık uygulanmış olarak:

#element {
  background: (somehow use var(--color) at some opacity);
}

Bunu nasıl yapabilirim? Herhangi bir önişlemci kullanmıyorum, sadece CSS kullanıyorum. Tamamen CSS cevabını tercih ederim, ancak JavaScript / jQuery'yi kabul edeceğim.

Kullanamam opacityçünkü şeffaf olmamalı bir arka plan görüntüsü kullanıyorum.

Mevcut bir renk değerini alıp buna alfa kanalı uygulayamazsınız. Yani, #f0f0f0alfa bileşeni vermek ve elde edilen değeri başka bir özellik ile kullanmak gibi mevcut bir onaltılık değeri alamazsınız .

Bununla birlikte, özel özellikler onaltılık değerinizi kullanmak için bir RGB üçlüsüne dönüştürmenize rgba(), bu değeri özel mülkte (virgül dahil!) Depolamanıza, bu değeri kullanarak istediğiniz alfa değerine sahip var()bir rgba()işleve değiştirmenize olanak tanır. sadece iş:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

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

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

Bu gerçek olamayacak kadar iyi görünüyor. ¹ Nasıl çalışır?

Büyü, özel özelliklerin değerlerinin, bir özellik değerindeki başvurular değiştirilirken , o özelliğin değeri hesaplanmadan önce olduğu gibi değiştirilmesidir . Uzakta özel özellikleri ile ilgili olarak olarak, değeri, bu bu araç sizin örnekte hiç bir renk değeri değil dek bir ifadenin bir renk değeri (ve yalnızca bu bağlamda) beklediği bir yerlerde görünür. Gönderen bölüm 2.1 css-değişkenler Spec arasında:var()--colorvar(--color)

Özel özellikler için izin verilen sözdizimi son derece izin vericidir. <declaration-value> üretimi, dizi <bad-string-token>, <bad-url-token>, eşleşmemiş <) - jeton>, <] içermediği sürece bir veya daha fazla jetondan oluşan herhangi bir diziyle eşleşir. token> veya <} - token> veya üst düzey <semicolon-token> belirteçleri veya "!" değerine sahip <delim-token> belirteçleri.

Örneğin, aşağıdakiler geçerli bir özel özelliktir:

--foo: if(x > 5) this.width = 10;

Bu değer, herhangi bir normal mülkte geçersiz olacağı için değişken olarak açıkça işe yaramaz olsa da, JavaScript tarafından okunabilir ve üzerinde işlem yapılabilir.

Ve bölüm 3 :

Bir özellik bir veya daha fazla var () işlevi içeriyorsa ve bu işlevler sözdizimsel olarak geçerliyse, tüm özelliğin dilbilgisinin ayrıştırma zamanında geçerli olduğu varsayılmalıdır. Var () işlevleri değiştirildikten sonra yalnızca hesaplanmış değer zamanında sözdizimi denetlenir.

Bu, 240, 240, 240yukarıda gördüğünüz değerin , bildirim hesaplanmadan önce doğrudan rgba()işleve ikame edildiği anlamına gelir . Yani bu:

#element {
  background-color: rgba(var(--color), 0.8);
}

rgba()virgülle ayrılmış en az dört sayısal değer beklemediği için başlangıçta geçerli CSS gibi görünmüyor :

#element {
  background-color: rgba(240, 240, 240, 0.8);
}

elbette, mükemmel bir şekilde geçerli olan CSS.

Bir adım ileri giderek, alfa bileşenini kendi özel özelliğinde saklayabilirsiniz:

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}

ve aynı sonuçla değiştirin:

#element {
  background-color: rgba(var(--color), var(--alpha));
}

Bu, hareket halindeyken değiştirebileceğiniz farklı alfa değerlerine sahip olmanızı sağlar.

¹ _{Eh, kod snippet'ini özel özellikleri desteklemeyen bir tarayıcıda çalıştırıyorsanız.}

OP bir önişlemci kullanmadığını biliyorum, ama aşağıdaki bilgiler burada cevabın bir parçası olsaydı ben yardımcı olurdu (henüz yorum yapamam, aksi takdirde @BoltClock cevap yorum.

Örneğin, scss kullanıyorsanız yukarıdaki yanıt başarısız olacaktır, çünkü scss stilleri scss'e özgü bir rgba () / hsla () işleviyle derlemeye çalışır, bu da 4 parametre gerektirir. Ancak, rgba () / hsla () da yerel css işlevleridir, bu nedenle scss işlevini atlamak için dize enterpolasyonunu kullanabilirsiniz.

Örnek (sass 3.5.0+ için geçerlidir):

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}

<div></div>

Dize enterpolasyonunun lighten(), ortaya çıkan kod işlevsel CSS olmayacağı için CSS olmayan scss işlevleri için çalışmayacağını unutmayın . Yine de geçerli scss olurdu, bu yüzden derleme hiçbir hata alırsınız.

Ben de benzer bir durum oldu, ama değişkenler şey olabilir maalesef verilen çözümler, benim için işe yaramadı rgbiçin hsliçin hexhatta renk adları.
Ben uygulayarak, şimdi bu sorunu çözmüş background-colorve opacitybir pseudo için :afterveya :beforeeleman:

.container {
    position: relative;
}

.container:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

Arka planın uygulanması gereken öğeye bağlı olarak stillerin biraz değiştirilmesi gerekebilir.
Ayrıca tüm durumlar için işe yaramayabilir, ancak umarım diğer çözümlerin kullanılamadığı bazı durumlarda yardımcı olur.

Düzenleme: Sadece fark ettim ki, bu çözüm açıkça hedef öğenin önünde bir öğe oluşturur ve şeffaf bir arka plan rengi uygular gibi metin rengini etkiler.
Bu bazı durumlarda bir sorun olabilir.

Bu gerçekten CSS ile mümkündür . Sadece biraz kirli ve degradeleri kullanmanız gerekecek. Küçük bir parçacığı örnek olarak kodladım, koyu arka planlar için açık-beyaz olanlar gibi siyah opaklığı kullanmanız gerektiğini unutmayın.

:root {
  --red: rgba(255, 0, 0, 1);
  --white-low-opacity: rgba(255, 255, 255, .3);
  --white-high-opacity: rgba(255, 255, 255, .7);
  --black-low-opacity: rgba(0, 0, 0, .3);
  --black-high-opacity: rgba(0, 0, 0, .7);
}

div {
	width: 100px;
	height: 100px;
	margin: 10px;
}
    
    
.element1 {
	background: 
        linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element2 {
	background: 
        linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}
    
.element3 {
	background: 
        linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element4 {
	background: 
        linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>

:root{
--color: 255, 0, 0;
}

#element{
    background-color: rgba(var(--color), opacity);
}

opaklığı 0 ile 1 arasında bir şeyle değiştirdiğinizde

SCSS / SASS

Avantajı: Her kanal için 8 Bit (0-255) kullanmak yerine Hex renk değerlerini kullanabilirsiniz.

İlk fikri şu şekilde yaptım: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

Düzenleme: Ayrıca #{$color-name}-rgboluşturulan * -r, * -g, * -b CSS değişkenlerini kullanmak ve atlamak için alfa işlevini değiştirebilirsiniz .

Sonuç

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Generated from the alpha function
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // OR (you wrote this yourself, see usage)
  color: rgba(var(--main-color-rgb), 0.5);
}

Kullanımı:

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // With alpha function:
  color: alpha(var(--main-color), 0.5);
  // OR just using the generated variable directly
  color: rgba(var(--main-color-rgb), 0.5);
}

Mixin ve fonksiyonları

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}

Umarım bu biraz zaman kazanır.

Her renk için orijinal ve opaklığa sahip olan için belirli bir değişken / değer ayarlayabilirsiniz:

:root {
  --color: #F00;
  --color-opacity: rgba(255, 0, 0, 0.5);
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color-opacity);
}

<div id="a1">asdf</div>
<div id="a2">asdf</div>

Bunu kullanamıyorsanız ve javascript çözümüne uygunsanız, bunu kullanabilirsiniz:

$(function() {
  $('button').click(function() {
    bgcolor = $('#a2').css('backgroundColor');
    rgb_value = bgcolor.match(/\d+,\s?\d+,\s?\d+/)[0]
    $('#a2').css('backgroundColor', 'rgba(' + rgb_value + ', 0.5)');
  });
});

:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">asdf</div>
<div id="a2">asdf</div>
<button>Click to change opacity</button>

Genel css değişkeni ile rgba () kullanmak için şunu deneyin:

1. İçinizdeki rengi belirtin: root, ancak diğer cevapların yaptığı gibi rgb () kullanmayın. sadece değeri yaz

:root{
  --color : 255,0,0;
  }

2. Diğer cevaplar olarak var () kullanarak --color değişkenini kullan

#some-element {
  color : rgba(var(--color),0.5);
}

CSS'de rgba değerlerini kullanabilmeniz gerekir:

#element {
  background: rgba(240, 240, 240, 0.5);
}

veya sadece opaklığı ayarlayın:

#element {
  background: #f0f0f0;
  opacity: 0.5;    
}

Benim gibi altıgen renkleri seviyorsanız başka bir çözüm daha var. Onaltılık değer alfa değerinden sonra 6 basamaktır. 00% 100 şeffaflıktır 99% 75 civarındadır, daha sonra 'a1-af' sonra 'b1-bf' alfabesini kullanarak% 100 opak olan 'ff' ile biter.

:root {
--color: #F00;
}

#element {
background: var(--color)f6;
}