css - Chrome 中的 CSS 渐变模糊
问题描述
我尝试为 a 制作复杂的渐变背景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>
谁知道任何解决方法?
解决方案
推荐阅读
- protobuff.net - 类型不是预期的,并且无法推断出任何合同:(未知)IN C#
- fabricjs - 如何在fabric.js的一个角落添加2个控件?
- python - 如何使用 numpy.random 从某个分布中生成随机数?
- javascript - 如何将视频页面链接放在 jwplayer 上 iframe 的文本中
- asp.net-core - 使用 EasyNetQ 消费消息时出现异常
- retrofit2 - 改造 onFailure 但返回 http
- c++ - C++快速将int数组内容转储到文本文件中
- r - rvest html_table() 产生错误
- javascript - 按特定顺序列出 li 文本
- centos7 - 函数“NF_HOOK”的参数太少