jQuery 设置 CSS 背景不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19663427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery set CSS background opacity
提问by Brian
I have a <div>whose transparency of its background-color(and not its contents) I'd like to change. A remote API sends me this colour:
我想更改<div>其背景颜色（而不是其内容）的透明度。远程 API 向我发送了这种颜色：
#abcdef
and I tell jQuery (1.9) to apply this colour via .css:
我告诉 jQuery (1.9) 通过.css以下方式应用这种颜色：
$('div').css('background-color', '#abcdef');
The resultant div has a background-colorstyle of not #abcdef, but rather its RGB representation of the same colour.
生成的 div 的background-color样式为 not #abcdef，而是相同颜色的 RGB 表示。
background-color: rgb(171, 205, 239);
(Just an observation; not part of the problem)
（只是观察；不是问题的一部分）
The project requirement has been changed such that I will now need to change the transparency of the background as well, to a set percentage (50%). My desired background-colorattribute is thus
项目要求已更改，因此我现在还需要将背景的透明度更改为设定百分比 (50%)。background-color因此，我想要的属性是
background-color: rgba(171, 205, 239, 0.5);
, however, I cannot find a way to set this background-color attribute using just jQuery, a hex colour code, and still apply an alpha value. opacityaffects contents of the div as well as the background, so it is not an option.
，但是，我找不到仅使用 jQuery（十六进制颜色代码）设置此背景颜色属性的方法，并且仍然应用 alpha 值。opacity影响 div 的内容以及背景，所以它不是一个选项。
$('div').css('background-color', '#abcdef')
.css('opacity', 0.5); // undesirable opacity changes to div's content
Given the string #abcdef, is it possible onlyby calculation (e.g. hex2dec) that I will be able to apply a background opacity to a div if I am given only a hex colour string?
给定字符串#abcdef，如果我只得到一个十六进制颜色字符串，是否只有通过计算（例如 hex2dec）我才能将背景不透明度应用于 div？
回答by Pranav Gupta
try parseInt(hex,16)to convert hex string into decimal int
尝试parseInt(hex,16)将十六进制字符串转换为十进制整数
so in this case it'll be:
所以在这种情况下，它将是：
var color = '#abcdef';
var rgbaCol = 'rgba(' + parseInt(color.slice(-6,-4),16)
+ ',' + parseInt(color.slice(-4,-2),16)
+ ',' + parseInt(color.slice(-2),16)
+',0.5)';
$('div').css('background-color', rgbaCol)
you should create a function out of this to use in your application.
您应该从中创建一个函数以在您的应用程序中使用。
回答by The Alpha
You may try this
你可以试试这个
function convertHex(hex,opacity){
hex = hex.replace('#','');
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);
result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
}
$('h1').css('background', convertHex('#A7D136', 0.5));
回答by Ruwen
You may use this javascript helper function
你可以使用这个 javascript 辅助函数
function setColorOpacity(colorStr, opacity) {
if(colorStr.indexOf("rgb(") == 0)
{
var rgbaCol = colorStr.replace("rgb(", "rgba(");
rgbaCol = rgbaCol.replace(")", ", "+opacity+")");
return rgbaCol;
}
if(colorStr.indexOf("rgba(") == 0)
{
var rgbaCol = colorStr.substr(0, colorStr.lastIndexOf(",")+1) + opacity + ")";
return rgbaCol;
}
if(colorStr.length == 6)
colorStr = "#" + colorStr;
if(colorStr.indexOf("#") == 0)
{
var rgbaCol = 'rgba(' + parseInt(colorStr.slice(-6, -4), 16)
+ ',' + parseInt(colorStr.slice(-4, -2), 16)
+ ',' + parseInt(colorStr.slice(-2), 16)
+ ','+opacity+')';
return rgbaCol;
}
return colorStr;
}
回答by Martin
This should work for you. It does assume that you are passing a valid 6 digit hex code and an opacity, and does no error checking.
这应该对你有用。它确实假定您正在传递有效的 6 位十六进制代码和不透明度，并且不进行错误检查。
function hex2rgba(hex, opacity)
{
//extract the two hexadecimal digits for each color
var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
var matches = patt.exec(hex);
//convert them to decimal
var r = parseInt(matches[1], 16);
var g = parseInt(matches[2], 16);
var b = parseInt(matches[3], 16);
//create rgba string
var rgba = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
//return rgba colour
return rgba;
}
$(".box").css("background-color", hex2rgba("#ABCDEF", 0.6));
You can view an example of this on jsFiddle here
您可以在jsFiddle here上查看此示例
