我有这段代码，可以从十六进制代码生成 RGB 值。
<script>
var s = "<?php the_field('phpvariableforcolour'); ?>";
var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
var matches = patt.exec(s);
var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+");";
alert(rgb);
</script>
然后我想将 rgb 变量(当前位于警报中)应用到内联 css 样式，其中 RGB 值出现，例如rgba(0,0,0,0.0) : -
background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
我找不到办法做到这一点，使用 jQuery 我可以添加背景图像，但不是所有这些。
最佳答案
您可以在 jQuery 中使用“.css()”函数。
http://jsbin.com/vukize/1/edit?js,output
我使用的 HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>jQuery inline RGB Values</title>
</head>
<body>
<div id="colorObject"></div>
</body>
</html>
jQuery:
var rgba = "rgba(110,131,37,0.5)";
var rgbaTwo = "rgba(10,131,37,1)";
$('#colorObject').css({
'background' : '-webkit-linear-gradient(left,' + rgba + ', ' + rgbaTwo + ')',
'background' : '-moz-linear-gradient(left,' + rgba + ', ' + rgbaTwo + ')',
'background' : '-o-linear-gradient(left,' + rgba + ', ' + rgbaTwo + ')',
'background' : '-ms-linear-gradient(left,' + rgba + ', ' + rgbaTwo + ')',
'background' : 'linear-gradient(to right,' + rgba + ', ' + rgbaTwo + ')'
});
编辑: 看起来有几个人比我先一步。 ;)
双重编辑:
因此，问题似乎出在分号上，如果在 css(); 函数中使用分号，则不应该出现分号。
更改:
var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+");";
至:
var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+")";
现在将其用作 css(); 函数中的变量就可以了。
关于jquery - 将 jQuery 变量放入 css 渐变中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26551616/