我正在使用以下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/

10-11 12:40
查看更多