blocks|key|4390729|text|在CSS中，您应该能够使用RGBA值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4390730|#element+{
++background:+rgba(240,+240,+240,+0.5);
}|code-block|syntax|javascript|4390731|或者只设置不透明度：|4390732|#element+{
++background:+#f0f0f0;
++opacity:+0.5;++++
}|4390733|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In CSS you should be able to either use rgba values:</p>

<pre><code>#element {
  background: rgba(240, 240, 240, 0.5);
}
</code></pre>

<p>or just set the opacity:</p>

<pre><code>#element {
  background: #f0f0f0;
  opacity: 0.5;    
}
</code></pre>


blocks|key|4391003|text|您可以为每种颜色设置特定的变量/值-原始颜色和具有不透明度的颜色：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4391004|​|4391005|:root+{
++--color:+#F00;
++--color-opacity:+rgba(255,+0,+0,+0.5);
}
#a1+{
++background:+var(--color);
}+
#a2+{
++background:+var(--color-opacity);
}|code-block|syntax|javascript|4391006|<div+id="a1">asdf</div>
<div+id="a2">asdf</div>|4391007|4391008|如果你不能使用这个，并且你可以使用javascript解决方案，你可以使用这个：|4391009|4391010|$(function()+{
++$('button').click(function()+{
++++bgcolor+=+$('#a2').css('backgroundColor');
++++rgb_value+=+bgcolor.match(/\d%2B,\s?\d%2B,\s?\d%2B/)[0]
++++$('#a2').css('backgroundColor',+'rgba('+%2B+rgb_value+%2B+',+0.5)');
++});
});|4391011|:root+{
++--color:+#F00;
}
#a1+{
++background:+var(--color);
}+
#a2+{
++background:+var(--color);
}|4391012|<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>|4391013|4391014|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|U|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|W|$]]

<p>You can set specific variable/value for each color - the original and the one with opacity:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
  --color: #F00;
  --color-opacity: rgba(255, 0, 0, 0.5);
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color-opacity);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="a1"&gt;asdf&lt;/div&gt;
&lt;div id="a2"&gt;asdf&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>If you can't use this and you are ok with javascript solution, you can use this one:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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)');
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="a1"&gt;asdf&lt;/div&gt;
&lt;div id="a2"&gt;asdf&lt;/div&gt;
&lt;button&gt;Click to change opacity&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4390844|text|:root{
--color:+255,+0,+0;
}

#element{
++++background-color:+rgba(var(--color),+opacity);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4390845|将不透明度替换为0到1之间的任何值|unstyled|4390846|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>:root{
--color: 255, 0, 0;
}

#element{
    background-color: rgba(var(--color), opacity);
}
</code></pre>

<p>where you replace opacity with anything between 0 and 1</p>


blocks|key|4391081|text|我知道OP没有使用预处理器，但如果以下信息是这里答案的一部分，我会得到帮助(我还不能评论，否则我会评论@BoltClock+answer。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4391082|如果您使用的是scss，则上面的答案将失败，因为scss尝试使用特定于scss的rgba()/hsla()函数编译样式，该函数需要4个参数。但是，rgba()/hsla()也是原生css函数，因此可以使用字符串插值来绕过scss函数。|4391083|示例(在sass+3.5.0%2B中有效)：|4391084|​|4391085|:root+{
++++--color_rgb:+250,+250,+250;
++++--color_hsl:+250,+50%25,+50%25;
}

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)'};
}|code-block|syntax|javascript|4391086|<div></div>|4391087|4391088|请注意，字符串插值将不适用于非CSS+scss函数，例如lighten()，因为生成的代码将不是函数式CSS。但是，它仍然是有效的scss，因此在编译过程中不会收到任何错误。|offset|length|style|CODE|4391089|entityMap^0|0|0|0|0|0|0|0|S|9|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|14|8|@$R|15|S|16|T|U]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>I know the OP isn't using a preprocessor, but I would have been helped if the following information was part of the answer here (I can't comment yet, otherwise I would have commented @BoltClock answer.</p>

<p>If you are using, e.g. scss, the answer above will fail, because scss attempts to compile the styles with a scss-specific rgba()/hsla() function, which requires 4 parameters.  However, rgba()/hsla() are also native css functions, so you can use string interpolation to bypass the scss function.</p>

<p>Example (valid in sass 3.5.0+):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>: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)'};
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Note that string interpolation will not work for non-CSS scss functions, such as <code>lighten()</code>, because the resulting code would not be functional CSS.  It would still be valid scss though, so you would receive no error in compilation.</p>


blocks|key|4390928|text|如果你像我一样喜欢十六进制的颜色，还有另一个解决方案。十六进制值是6位数，之后是alpha值。00是100%25的透明度99大约是75%25然后它使用字母'a1-af‘，然后是'b1-bf’，以'ff‘结尾，这是100%25不透明的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4390929|:root+{
--color:+#F00;
}

#element+{
background:+var(--color)f6;
}|code-block|syntax|javascript|4390930|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you love hex colors like me there is another solution.
The hex value is 6 digits after that is the alpha value.
00 is 100% transparency 99 is about 75% then it uses the alphabet 'a1-af' then 'b1-bf' ending with 'ff' which is 100% opaque. </p>

<pre><code>:root {
--color: #F00;
}

#element {
background: var(--color)f6;
}
</code></pre>


blocks|key|4390946|text|你可以使用linear-gradient来修改颜色：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4390947|background:+linear-gradient(to+bottom,+var(--your-color)+-1000%25,+var(--mixin-color),+1000%25)|code-block|syntax|javascript|4390948|​|4390949|$(()+=>+{
++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();
})|4390950|#canvas+{
++width:+100px;
++height:+100px;
++border:+2px+solid+#000;
++--hack:+10000%25;
++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%25,+transparent+25%25),+linear-gradient(-45deg,+#b0b0b0+25%25,+transparent+25%25),+linear-gradient(45deg,+transparent+75%25,+#b0b0b0+75%25),+linear-gradient(-45deg,+transparent+75%25,+#b0b0b0+75%25);
++background-size:+20px+20px;
++background-position:+0+0,+0+10px,+10px+-10px,+-10px+0px;
++padding:+10px;
++display:+inline-block;
}|4390951|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div+id="container">
++<div+id="canvas"></div>
</div>
<hr/>
<input+type="range"+id="opacity-value"+min="0"+max="1"+step="0.1"+value="0.5"+/>
<input+type="color"+id="color-value"+/>|4390952|4390953|entityMap^0|5|F|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|S|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|U|$]]

<p>you can use <code>linear-gradient</code> to hack the color:</p>
<pre class="lang-css prettyprint-override"><code>background: linear-gradient(to bottom, var(--your-color) -1000%, var(--mixin-color), 1000%)
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(() =&gt; {
  const setOpacity = () =&gt; {
    $('#canvas').css('--opacity', $('#opacity-value').val())
  }
  const setColor = () =&gt; {
    $('#canvas').css('--color', $('#color-value').val());
  }
  $('#opacity-value').on('input', setOpacity);
  $('#color-value').on('input', setColor);
  setOpacity();
  setColor();
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div id="container"&gt;
  &lt;div id="canvas"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;hr/&gt;
&lt;input type="range" id="opacity-value" min="0" max="1" step="0.1" value="0.5" /&gt;
&lt;input type="color" id="color-value" /&gt;</code></pre>
</div>
</div>
</p>


<p>I am designing an app in electron, so I have access to CSS variables. I have defined a color variable in <code>vars.css</code>:</p>

<pre class="lang-css prettyprint-override"><code>:root {
  --color: #f0f0f0;
}
</code></pre>

<p>I want to use this color in <code>main.css</code>, but with some opacity applied:</p>

<pre class="lang-css prettyprint-override"><code>#element {
  background: (somehow use var(--color) at some opacity);
}
</code></pre>

<p>How would I go about doing this? I am not using any preprocessor, only CSS. I would prefer an all-CSS answer, but I will accept JavaScript/jQuery.</p>

<p>I cannot use <code>opacity</code> because I am using a background image that should not be transparent.</p>


How do I apply opacity to a CSS color variable?

jQuery

我正在设计一个电子应用程序，所以我可以访问CSS变量。我在vars.css中定义了一个颜色变量:root {  --color: #f0f0f0;}我想在main.css中使用此颜色，但应用了一些不透明度：#element {  background: (somehow use var(--color) at some...

问如何将不透明度应用于CSS颜色变量？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将不透明度应用于CSS颜色变量？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将不透明度应用于CSS颜色变量？
EN