Saya mendesain aplikasi dalam elektron, jadi saya memiliki akses ke variabel CSS. Saya telah menentukan variabel warna di vars.css:

:root {
  --color: #f0f0f0;
}

Saya ingin menggunakan warna ini main.css, tetapi dengan beberapa opacity yang diterapkan:

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

Bagaimana saya akan melakukan ini? Saya tidak menggunakan preprocessor apa pun, hanya CSS. Saya lebih suka jawaban semua-CSS, tetapi saya akan menerima JavaScript / jQuery.

Saya tidak dapat menggunakan opacitykarena saya menggunakan gambar latar yang seharusnya tidak transparan.

Anda tidak dapat mengambil nilai warna yang sudah ada dan menerapkan saluran alfa padanya. Yaitu, Anda tidak dapat mengambil nilai hex yang sudah ada seperti #f0f0f0, memberinya komponen alfa dan menggunakan nilai yang dihasilkan dengan properti lain.

Namun, sifat kustom memungkinkan Anda untuk mengkonversi nilai hex Anda menjadi triplet RGB untuk digunakan dengan rgba(), toko yang nilai dalam properti kustom (termasuk koma!), Pengganti yang nilai menggunakan var()menjadi rgba()fungsi dengan yang diinginkan nilai alpha Anda, dan itu akan hanya bekerja:

: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>

Ini sepertinya terlalu bagus untuk menjadi kenyataan. ¹ Bagaimana cara kerjanya?

Keajaibannya terletak pada kenyataan bahwa nilai properti kustom diganti seperti saat mengganti var()referensi dalam nilai properti, sebelum nilai properti tersebut dihitung. Ini berarti bahwa sejauh sifat kustom yang bersangkutan, nilai --colordalam contoh Anda bukanlah nilai warna sama sekali sampai suatu var(--color)ekspresi muncul di suatu tempat yang mengharapkan nilai warna (dan hanya dalam konteks itu). Dari bagian 2.1 spesifikasi variabel css:

Sintaks yang diizinkan untuk properti kustom sangat permisif. Produksi <declaration-value> cocok dengan urutan apa pun dari satu atau beberapa token, selama urutan tersebut tidak berisi <bad-string-token>, <bad-url-token>, tidak cocok <) - token>, <] - token>, atau <} - token>, atau token <semicolon-token> tingkat atas atau token <delim-token> dengan nilai "!".

Misalnya, berikut ini adalah properti khusus yang valid:

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

Meskipun nilai ini jelas tidak berguna sebagai variabel, karena tidak valid di properti normal mana pun, nilai ini mungkin dibaca dan ditindaklanjuti oleh JavaScript.

Dan bagian 3 :

Jika sebuah properti berisi satu atau beberapa fungsi var (), dan fungsi tersebut valid secara sintaksis, seluruh tata bahasa properti harus dianggap valid pada waktu parse. Ini hanya diperiksa sintaksnya pada waktu nilai komputasi, setelah fungsi var () diganti.

Ini berarti bahwa 240, 240, 240nilai yang Anda lihat di atas diganti langsung ke dalam rgba()fungsi sebelum deklarasi dihitung. Jadi ini:

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

yang pada awalnya tampaknya tidak valid karena rgba()mengharapkan tidak kurang dari empat nilai numerik yang dipisahkan koma, menjadi ini:

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

yang, tentu saja, merupakan CSS yang benar-benar valid.

Selangkah lebih maju, Anda dapat menyimpan komponen alfa di properti kustomnya sendiri:

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

dan gantikan, dengan hasil yang sama:

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

Hal ini memungkinkan Anda untuk memiliki nilai alfa berbeda yang dapat Anda tukar dengan cepat.

¹ _{Ya, jika Anda menjalankan cuplikan kode di browser yang tidak mendukung properti khusus.}

Saya tahu OP tidak menggunakan preprocessor, tetapi saya akan terbantu jika informasi berikut adalah bagian dari jawaban di sini (saya belum bisa berkomentar, kalau tidak saya akan mengomentari jawaban @BoltClock.

Jika Anda menggunakan, misalnya scss, jawaban di atas akan gagal, karena scss mencoba mengkompilasi gaya dengan fungsi rgba () / hsla () khusus scss, yang memerlukan 4 parameter. Namun, rgba () / hsla () juga merupakan fungsi css asli, sehingga Anda dapat menggunakan interpolasi string untuk melewati fungsi scss.

Contoh (valid di sass 3.5.0+):

: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>

Perhatikan bahwa interpolasi string tidak akan berfungsi untuk fungsi scss non-CSS, seperti lighten(), karena kode yang dihasilkan tidak akan berfungsi sebagai CSS. Itu masih akan menjadi scss yang valid, jadi Anda tidak akan menerima kesalahan dalam kompilasi.

Saya berada dalam situasi yang sama, tetapi sayangnya solusi yang diberikan tidak berhasil untuk saya, karena variabel dapat berupa apa saja dari rgbhingga hslhingga hexatau bahkan nama warna.
Saya memecahkan masalah ini sekarang, dengan menerapkan background-colordan pada opacitypseudo :afteratau :beforeelemen:

.container {
    position: relative;
}

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

Gaya mungkin perlu diubah sedikit, tergantung pada elemen latar belakang harus diterapkan.
Juga mungkin tidak berfungsi untuk semua situasi, tetapi mudah-mudahan ini membantu dalam beberapa kasus, di mana solusi lain tidak dapat digunakan.

Sunting: Saya baru saja memperhatikan, bahwa solusi ini jelas juga memengaruhi warna teks, karena ini membuat elemen di depan elemen target dan menerapkan warna latar transparan padanya.
Ini mungkin menjadi masalah dalam beberapa kasus.

Ini memang mungkin dengan CSS . Hanya sedikit kotor, dan Anda harus menggunakan gradien. Saya telah mengkodekan potongan kecil sebagai contoh, perhatikan bahwa untuk latar belakang gelap, Anda harus menggunakan opasitas hitam, seperti untuk terang-putih .:

: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);
}

di mana Anda mengganti opacity dengan apa pun antara 0 dan 1

SCSS / SASS

Keuntungan: Anda bisa menggunakan nilai warna Hex, alih-alih menggunakan 8 Bit untuk setiap saluran (0-255).

Beginilah cara saya melakukannya dengan ide awal: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

Edit: Anda juga dapat memodifikasi fungsi alfa untuk hanya menggunakan #{$color-name}-rgbdan menghilangkan variabel CSS * -r, * -g, * -b yang dihasilkan.

Hasil

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);
}

Pemakaian:

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 dan fungsinya

@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);
}

Semoga ini akan menghemat waktu seseorang.

Anda dapat mengatur variabel / nilai tertentu untuk setiap warna - yang asli dan yang memiliki opasitas:

: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>

Jika Anda tidak dapat menggunakan ini dan Anda baik-baik saja dengan solusi javascript, Anda dapat menggunakan yang ini:

$(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>

Untuk menggunakan rgba () dengan variabel css umum, coba ini:

1. Deklarasikan warna Anda di dalam: root, tetapi jangan gunakan rgb () seperti jawaban lain. tulis saja nilainya

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

2. Gunakan variabel --color menggunakan var () sebagai jawaban lain

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

Di CSS Anda harus dapat menggunakan nilai rgba:

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

atau cukup setel opasitas:

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

Jika Anda menyukai warna hex seperti saya, ada solusi lain. Nilai hex adalah 6 digit setelah itu adalah nilai alpha. 00 adalah 100% transparansi 99 adalah sekitar 75% kemudian menggunakan alfabet 'a1-af' lalu 'b1-bf' diakhiri dengan 'ff' yang 100% buram.

:root {
--color: #F00;
}

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