我正在设计一个电子应用程序，所以我可以访问CSS变量。我在vars.css中定义了一个颜色变量:
:root {
--color: #f0f0f0;
}
我想在main.css中使用这个颜色，但是使用了一些不透明度:
#element {
background: (somehow use var(--color) at some opacity);
}
我该怎么做呢?我没有使用任何预处理器，只有CSS。我更喜欢全css的答案，但我将接受JavaScript/jQuery。
我不能使用不透明，因为我使用的背景图像不应该是透明的。
当前回答
如果你使用暗和光模式，我使用这个样本。我更喜欢分开的颜色和rgb颜色变量分配。所以我每个循环使用两个。我意识到这个解决方案不是纯代码。如果你想干代码，你可以使用一个循环。
$colors-light: ( white: #fff, black: #0c0d0e, orange: #f48024, green: #5eba7d, blue: #0077cc, red: #d1383d, red-100: #e2474c, red-200: red, ); $colors-dark: ( black: #fff, white: #2d2d2d, orange: #dd7118, green: #5eba7d, blue: #0077cc, red: #aa1c21, red-100: #c9292e, red-200: red, ); @function hexToRGB($hex) { @return red($hex), green($hex), blue($hex); } @mixin generate_colors($colors) { // Colors @each $color, $value in $colors { @if str-slice(#{$value}, 1, 1) == "#" { --#{$color}: #{$value}; } @else { --#{$color}: var(--#{$value}); } } // RGB Colors @each $color, $value in $colors { @if str-slice(#{$value}, 1, 1) == "#" { --RGB_#{$color}: #{hexToRGB($value)}; } @else { --RGB_#{$color}: var(--RGB_#{$value}); } } } :root { @include generate_colors($colors-light); } [data-theme="dark"] { @include generate_colors($colors-dark); }
干燥的代码
@mixin generate_colors($colors) { //颜色，RGB颜色 @每个$color， $value在$colors { @if str-slice(#{$value}， 1,1) == "#" { ——#{$颜色}:#{$价值}; ——RGB_ #{$颜色}:# {hexToRGB(美元值)}; } @其他{ ——#{$颜色}:var(——#{$价值}); ——RGB_ #{$颜色}:var(——RGB_ #{$价值}); ｝ ｝ ｝
css输出
:root { --white: #fff; --RGB_white: 255, 255, 255; --black: #0c0d0e; --RGB_black: 12, 13, 14; --orange: #f48024; --RGB_orange: 244, 128, 36; --green: #5eba7d; --RGB_green: 94, 186, 125; --blue: #0077cc; --RGB_blue: 0, 119, 204; --red: #d1383d; --RGB_red: 209, 56, 61; --red-100: #e2474c; --RGB_red-100: 226, 71, 76; --red-200: var(--red); --RGB_red-200: var(--RGB_red); } [data-theme="dark"] { --black: #fff; --RGB_black: 255, 255, 255; --white: #2d2d2d; --RGB_white: 45, 45, 45; --orange: #dd7118; --RGB_orange: 221, 113, 24; --green: #5eba7d; --RGB_green: 94, 186, 125; --blue: #0077cc; --RGB_blue: 0, 119, 204; --red: #aa1c21; --RGB_red: 170, 28, 33; --red-100: #c9292e; --RGB_red-100: 201, 41, 46; --red-200: var(--red); --RGB_red-200: var(--RGB_red); } body { background-color: var(--white); } .colors { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 50px 0 0 30px; } .box { width: 100px; height: 100px; margin-right: 5px; } .black { background-color: var(--black); } .white { background-color: var(--white); } .orange { background-color: var(--orange); } .green { background-color: var(--green); } .blue { background-color: var(--blue); } .red { background-color: var(--red); } .red-200 { background-color: var(--red-200); } .black-rgba { background-color: rgba(var(--RGB_black), 0.5); } .white-rgba { background-color: rgba(var(--RGB_white), 0.5); } .orange-rgba { background-color: rgba(var(--RGB_orange), 0.5); } .green-rgba { background-color: rgba(var(--RGB_green), 0.5); } .blue-rgba { background-color: rgba(var(--RGB_blue), 0.5); } .red-rgba { background-color: rgba(var(--RGB_red), 0.5); } .red-rgba-200 { background-color: rgba(var(--RGB_red-200), 0.5); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div> <input type="checkbox" id="dark-switch" name="theme" /> <label for="dark-switch">Dark / Light</label> </div> <div class="color-box"> <div class="colors"> <div class="box red-200"></div> <div class="box black"></div> <div class="box white"></div> <div class="box orange"></div> <div class="box green"></div> <div class="box blue"></div> <div class="box red"></div> </div> <br> <h1>RGBA</h1> <div class="colors"> <div class="box red-rgba-200"></div> <div class="box black-rgba"></div> <div class="box white-rgba"></div> <div class="box orange-rgba"></div> <div class="box green-rgba"></div> <div class="box blue-rgba"></div> <div class="box red-rgba"></div> </div> </div> <script> const dark_switch = document.getElementById("dark-switch"); dark_switch.addEventListener("change", (e) => { e.target.checked ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.setAttribute("data-theme", "light"); }); </script> </body> </html>
其他回答
如果你使用暗和光模式，我使用这个样本。我更喜欢分开的颜色和rgb颜色变量分配。所以我每个循环使用两个。我意识到这个解决方案不是纯代码。如果你想干代码，你可以使用一个循环。
$colors-light: ( white: #fff, black: #0c0d0e, orange: #f48024, green: #5eba7d, blue: #0077cc, red: #d1383d, red-100: #e2474c, red-200: red, ); $colors-dark: ( black: #fff, white: #2d2d2d, orange: #dd7118, green: #5eba7d, blue: #0077cc, red: #aa1c21, red-100: #c9292e, red-200: red, ); @function hexToRGB($hex) { @return red($hex), green($hex), blue($hex); } @mixin generate_colors($colors) { // Colors @each $color, $value in $colors { @if str-slice(#{$value}, 1, 1) == "#" { --#{$color}: #{$value}; } @else { --#{$color}: var(--#{$value}); } } // RGB Colors @each $color, $value in $colors { @if str-slice(#{$value}, 1, 1) == "#" { --RGB_#{$color}: #{hexToRGB($value)}; } @else { --RGB_#{$color}: var(--RGB_#{$value}); } } } :root { @include generate_colors($colors-light); } [data-theme="dark"] { @include generate_colors($colors-dark); }
干燥的代码
@mixin generate_colors($colors) { //颜色，RGB颜色 @每个$color， $value在$colors { @if str-slice(#{$value}， 1,1) == "#" { ——#{$颜色}:#{$价值}; ——RGB_ #{$颜色}:# {hexToRGB(美元值)}; } @其他{ ——#{$颜色}:var(——#{$价值}); ——RGB_ #{$颜色}:var(——RGB_ #{$价值}); ｝ ｝ ｝
css输出
:root { --white: #fff; --RGB_white: 255, 255, 255; --black: #0c0d0e; --RGB_black: 12, 13, 14; --orange: #f48024; --RGB_orange: 244, 128, 36; --green: #5eba7d; --RGB_green: 94, 186, 125; --blue: #0077cc; --RGB_blue: 0, 119, 204; --red: #d1383d; --RGB_red: 209, 56, 61; --red-100: #e2474c; --RGB_red-100: 226, 71, 76; --red-200: var(--red); --RGB_red-200: var(--RGB_red); } [data-theme="dark"] { --black: #fff; --RGB_black: 255, 255, 255; --white: #2d2d2d; --RGB_white: 45, 45, 45; --orange: #dd7118; --RGB_orange: 221, 113, 24; --green: #5eba7d; --RGB_green: 94, 186, 125; --blue: #0077cc; --RGB_blue: 0, 119, 204; --red: #aa1c21; --RGB_red: 170, 28, 33; --red-100: #c9292e; --RGB_red-100: 201, 41, 46; --red-200: var(--red); --RGB_red-200: var(--RGB_red); } body { background-color: var(--white); } .colors { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 50px 0 0 30px; } .box { width: 100px; height: 100px; margin-right: 5px; } .black { background-color: var(--black); } .white { background-color: var(--white); } .orange { background-color: var(--orange); } .green { background-color: var(--green); } .blue { background-color: var(--blue); } .red { background-color: var(--red); } .red-200 { background-color: var(--red-200); } .black-rgba { background-color: rgba(var(--RGB_black), 0.5); } .white-rgba { background-color: rgba(var(--RGB_white), 0.5); } .orange-rgba { background-color: rgba(var(--RGB_orange), 0.5); } .green-rgba { background-color: rgba(var(--RGB_green), 0.5); } .blue-rgba { background-color: rgba(var(--RGB_blue), 0.5); } .red-rgba { background-color: rgba(var(--RGB_red), 0.5); } .red-rgba-200 { background-color: rgba(var(--RGB_red-200), 0.5); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div> <input type="checkbox" id="dark-switch" name="theme" /> <label for="dark-switch">Dark / Light</label> </div> <div class="color-box"> <div class="colors"> <div class="box red-200"></div> <div class="box black"></div> <div class="box white"></div> <div class="box orange"></div> <div class="box green"></div> <div class="box blue"></div> <div class="box red"></div> </div> <br> <h1>RGBA</h1> <div class="colors"> <div class="box red-rgba-200"></div> <div class="box black-rgba"></div> <div class="box white-rgba"></div> <div class="box orange-rgba"></div> <div class="box green-rgba"></div> <div class="box blue-rgba"></div> <div class="box red-rgba"></div> </div> </div> <script> const dark_switch = document.getElementById("dark-switch"); dark_switch.addEventListener("change", (e) => { e.target.checked ? document.documentElement.setAttribute("data-theme", "dark") : document.documentElement.setAttribute("data-theme", "light"); }); </script> </body> </html>
你可以为每种颜色设置特定的变量/值——原始的和不透明的:
:根{ -颜色:# F00; ——color-opacity: rgba(255, 0, 0, 0.5); ｝ # a1 { 背景:var(颜色); ｝ # a2 { 背景:var(——color-opacity); ｝ < div id = " a1 " > asdf < / div > < div id = " a2 " > asdf < / div >
如果你不能使用这个，你可以使用javascript解决方案，你可以使用这个:
$(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>
在CSS中，你应该能够使用rgba值:
#element {
background: rgba(240, 240, 240, 0.5);
}
或者只是设置不透明度:
#element {
background: #f0f0f0;
opacity: 0.5;
}
我知道OP没有使用预处理器，但如果以下信息是这里答案的一部分，我会得到帮助(我还不能评论，否则我会评论@BoltClock答案。
如果你正在使用，例如scss，上面的答案将会失败，因为scss试图用特定于scss的rgba()/hsla()函数编译样式，这需要4个参数。然而，rgba()/hsla()也是css的原生函数，所以你可以使用字符串插值来绕过scss函数。
示例(在sass 3.5.0+中有效):
:根{ ——color_rgb: 250, 250, 250; ——color_hsl: 250, 50%， 50%; ｝ div { /*这是有效的CSS，但在scss编译中将失败*/ Background-color: rgba(var(——color_rgb)， 0.5); /*这是有效的scss，将生成*/上面的CSS background - color: # {' rgba (var(——color_rgb), 0.5)的}; ｝ < div > < / div >
请注意，字符串插值对非CSS的scss函数(如lightight())不起作用，因为生成的代码不是函数式CSS。但它仍然是有效的scss，因此编译时不会收到错误。
我也遇到过类似的情况，但不幸的是，给出的解决方案对我不起作用，因为变量可以是任何东西，从rgb到hsl到十六进制甚至颜色名称。 我现在解决了这个问题，通过应用背景颜色和不透明度到一个伪:after或:before元素:
.container {
position: relative;
}
.container::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
background-color: var(--color);
opacity: 0.3;
}
样式可能需要稍微改变一下，这取决于背景应该应用到的元素。 另外，它可能并不适用于所有情况，但希望它能在其他解决方案无法使用的某些情况下有所帮助。
编辑: 我刚刚注意到，这个解决方案显然也影响了文本颜色，因为它在目标元素前面创建了一个元素，并对其应用了透明的背景色。 在某些情况下，这可能是个问题。
