Question

我尝试为div制作复杂的渐变背景。 Mozilla，IE，Edge表现得很好。但是在Chrome和Opera中，我看到了惊人的结果。渐变条纹看起来很模糊。而且一些条纹在错误的位置。

以下是示例（请在整页上展开）：

/*jshint strict: false*/
/*globals $:false*/
/*jshint multistr: true*/

$(function() {

  function drawGradient(stripeColor, stripeLength, backgroundColor, backgroundLength, count, angle) {
    var gradients;
    gradients = "linear-gradient(" + angle + ", ";
    for (i = 1; i <= count; i++) {
        gradients += stripeColor + " " + ((stripeLength + backgroundLength) * (i - 1)).toFixed(2) + "px, "; 
        gradients += stripeColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength).toFixed(2) + "px, "; //alert((stripeLength + backgroundLength) * (i - 1) + stripeLength + "px, ");
        gradients += backgroundColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength).toFixed(2) + "px, ";
        gradients += backgroundColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength + backgroundLength).toFixed(2) + "px, ";
    }
 		gradients +=  "rgba(0, 0, 0, 0) " + ((stripeLength + backgroundLength) * (count - 1)+ stripeLength + backgroundLength).toFixed(2) + "px)";
 		return gradients;
  }

  function drawRadialGrad(stripeColor, stripeLength, backgroundColor, backgroundLength, count, position, size) {
  	var gradients;
  	gradients = "radial-gradient(" + "circle " + size + "px " + "at " + position + ", ";
  	for (i = 1; i <= count; i++) {
        gradients += stripeColor + " " + ((stripeLength + backgroundLength) * (i - 1)).toFixed(2) + "%, "; 
        gradients += stripeColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength).toFixed(2) + "%, "; //alert((stripeLength + backgroundLength) * (i - 1) + stripeLength + "%, ");
        gradients += backgroundColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength).toFixed(2) + "%, ";
        gradients += backgroundColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength + backgroundLength).toFixed(2) + "%, ";
    }
 		gradients +=  "rgba(0, 0, 0, 0) " + ((stripeLength + backgroundLength) * (count - 1)+ stripeLength + backgroundLength).toFixed(2) + "%)";
 		return gradients;
  }

 	grad = drawGradient("#777", 2, "#ccc", 20, 10, "-45.1deg");
  grad += ", " + drawGradient("#777", 2, "#ccc", 40, 13, "167deg");
  grad += ", " + drawRadialGrad("#777", 1, "#ccc", 10, 10, "40% 60%", 200);
  $(".gradient").css("background", grad);

});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="behavior.js"></script>
  </head>
  <body>
    <div class="gradient" style="height: 100vh;"></div>  
  </body>
</html>

谁知道任何解决方法？

Chrome中的CSS渐变模糊

0 个答案: