我正在使用以下CSS创建虚线背景:
body {
background: radial-gradient(
circle,
green,
green 20%,
#000 0%,
#000
);
background-size: 10px 10px;
}
我可以使用JQuery更改图案中点的颜色吗? Codepen链接:https://codepen.io/forTheLoveOfCode/pen/LOppaL?editors=1111
目前,我的JQuery如下(更改为线性渐变-我设法找到的东西):
$(document).ready(function() {
$("#changeDots").on("click", function() {
$("body").css({background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))"});
});
});
最佳答案
径向渐变很难在jQuery中更改,因为存在无限数量的渲染可能性。同样,浏览器前缀可能很难管理。
由于radial-gradient
是分配给background-image
的值,因此可以将其与background-color
结合使用。因此,将渐变从transparent
更改为black
,即可轻松更改background-color
属性:
$(document).ready(function() {
$("#changeDots").on("click", function() {
$("body").css({backgroundColor: "red"});
});
});
body {
background: radial-gradient(
circle,
transparent,
transparent 20%,
#000 0%,
#000
);
background-size: 10px 10px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class = "row text-center">
<div class = "col-xs-12">
<br/>
<button id = "changeDots" class = "btn btn-primary">
Change the colour of green dots
</button>
</div>
</div>
</div>
关于jquery - 我可以使用JQuery更改使用CSS径向渐变创建的图案的颜色吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47055387/