|
|
相关文章推荐
|
追风的啤酒 · 是否可以通过采用技术手段杜绝Session欺 ...· 1 年前 · |
|
|
唠叨的桔子 · PHP日期转换为varchar / ...· 1 年前 · |
|
|
俊秀的熊猫 · 后台作业指南 - Best ...· 1 年前 · |
|
|
爱吹牛的高山 · 判断点是否在多边形内(包括在多边形上) - ...· 2 年前 · |
|
|
谦和的西红柿 · django中ajax ...· 2 年前 · |
我正在设计一个电子应用程序，所以我可以访问CSS变量。我在
vars.css
中定义了一个颜色变量
:root {
--color: #f0f0f0;
}
我想在
main.css
中使用此颜色，但应用了一些不透明度：
#element {
background: (somehow use var(--color) at some opacity);
}我该怎么做呢？我没有使用任何预处理器，只使用CSS。我更喜欢全CSS的答案，但我会接受JavaScript/jQuery。
我不能使用
opacity
，因为我使用的背景图像不应该是透明的。
6 个回答
高票数
最新
Patrick H.
回答于2016-10-13 08:55
得票数
-9
在CSS中，您应该能够使用RGBA值：
#element {
background: rgba(240, 240, 240, 0.5);
}或者只设置不透明度：
#element {
background: #f0f0f0;
opacity: 0.5;
}
Dekel
修改于2016-10-13 09:04
得票数
-1
您可以为每种颜色设置特定的变量/值-原始颜色和具有不透明度的颜色：
: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>
如果你不能使用这个，并且你可以使用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>
Pizza lord
修改于2016-12-22 22:52
得票数
0
:root{
--color: 255, 0, 0;
#element{
background-color: rgba(var(--color), opacity);
}将不透明度替换为0到1之间的任何值
SimplyPhy
回答于2017-12-04 10:17
得票数
35
我知道OP没有使用预处理器，但如果以下信息是这里答案的一部分，我会得到帮助(我还不能评论，否则我会评论@BoltClock answer。
如果您使用的是scss，则上面的答案将失败，因为scss尝试使用特定于scss的rgba()/hsla()函数编译样式，该函数需要4个参数。但是，rgba()/hsla()也是原生css函数，因此可以使用字符串插值来绕过scss函数。
示例(在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>
请注意，字符串插值将不适用于非CSS scss函数，例如
lighten()
，因为生成的代码将不是函数式CSS。但是，它仍然是有效的scss，因此在编译过程中不会收到任何错误。
Seth M
回答于2018-08-25 00:20
得票数
-4
如果你像我一样喜欢十六进制的颜色，还有另一个解决方案。十六进制值是6位数，之后是alpha值。00是100%的透明度99大约是75%然后它使用字母'a1-af‘，然后是'b1-bf’，以'ff‘结尾，这是100%不透明的。
:root {
--color: #F00;
#element {
background: var(--color)f6;
}
user2053153
回答于2021-05-31 12:02
得票数
2
你可以使用
linear-gradient
来修改颜色：
background: linear-gradient(to bottom, var(--your-color) -1000%, var(--mixin-color), 1000%)
$(() => {
const setOpacity = () => {
$('#canvas').css('--opacity', $('#opacity-value').val())
const setColor = () => {
$('#canvas').css('--color', $('#color-value').val());
$('#opacity-value').on('input', setOpacity);
$('#color-value').on('input', setColor);
setOpacity();
setColor();
})#canvas {
width: 100px;
height: 100px;
border: 2px solid #000;
--hack: 10000%;
background: linear-gradient( to bottom, var(--color) calc((var(--opacity) - 1) * var(--hack)), transparent calc(var(--opacity) * var(--hack)));
#container {
background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%), linear-gradient(-45deg, #b0b0b0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b0b0b0 75%), linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
padding: 10px;
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
推荐文章