随机渐变背景颜色

Question

我正在尝试为每个部分获取一个随机渐变背景（在四种颜色之间）。这是我的代码：

let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
    $(".main").children('section').each(function(){   
        let firstGradient = randomNumber(10,90);
        $(this).css(
            "background", "linear-gradient(141deg, "+colors[randomNumber(0,4)]+" "+firstGradient+"%, "+colors[randomNumber(0,4)]+" "+(100-firstGradient)+"%)"
        );
    });
    function randomNumber(min,max){
        return Math.floor((Math.random() * max) + min);
    }

section{
  display:block;
  height:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>

这太随机了。有时候我得到像这样的结果： 但是结果应该是这样的：

- KaSkuLL

---

好的，我会尽力进行翻译。以下是您提供的链接所包含的内容：一名办公室职员向同事抱怨他们的上司给自己带来了许多不必要的压力和焦虑。在经过一番探讨后，他们决定将这些问题告知公司高层并寻求解决方案。然而，当他们联系公司高层时，对方却表示他们已经有一个“匿名投诉箱”来处理此类问题，并建议两位职员将问题写入信封，并放入该投诉箱中。最终，两人认为这个解决方案没什么用处，因为他们无法确认是否真正有人会读取他们的投诉并采取行动来解决这些问题。 - j08691

@j08691 嗯，我同意，但在这种情况下并不是如此。 我的意思是，我可以得到10％和90％，但渐变应该仍然有效。（在某些情况下，两种颜色之间没有“模糊”） - KaSkuLL

你改变了问题，有点使我的回答无效了....在接受答案之后（甚至在发布答案之后），你不应该更改问题，如果更改会使答案无效。 - Jamiec

Answer 1

如果您不尝试计算剩余的%，那么它似乎可以按照您的预期工作。

let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
    $(".main").children('section').each(function(){   
        let firstGradient = randomNumber(10,90);
        $(this).css(
            "background", "linear-gradient(141deg, "+colors[randomNumber(0,4)]+" "+firstGradient+"%, "+colors[randomNumber(0,4)] + ")"
        );
    });
    function randomNumber(min,max){
        return Math.floor((Math.random() * max) + min);
    }

section{
  display:block;
  height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>

- Jamiec

---

你说得对，但是为什么呢？我的意思是，为什么你的答案有效呢？^^ - KaSkuLL

@KaSkuLL 因为有时候随机情况下你会得到50%。 - Jamiec

Answer 2

let colors = ["#ffd0d2","#fffdd0","#d0fffd","#d0d2ff"];
    $(".main").children('section').each(function(){   
        let firstGradient = randomNumber(10,40);
        $(this).css(
            "background", "linear-gradient(141deg, "+colors[randomNumber(0,4)]+" "+firstGradient+"%, "+colors[randomNumber(0,4)]+" "+(100-firstGradient)+"%)"
        );
        "background", "linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%)" 
    });
    function randomNumber(min,max){
        return Math.floor((Math.random() * max) + min);
    }

section{
  display:block;
  height:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>

如果您的第一个渐变位置大于50％，第二个位置小于第一个位置。例如，从红色60％到绿色40％的渐变将是一条直线。请将您的随机数设置为始终小于50。

当渐变从和到相同颜色时，显然不会出现模糊效果。

- Elijah Ellanski