Question

我试图使用线性渐变在纯css中复制此图像。

我尝试使用渐变色块，但所有颜色都是混合色。有没有办法让线性渐变变硬？

我试过了：

  background-image: -webkit-linear-gradient(left, #252525 0%, #f5f5f5 20%, #00b7b7 40%,#b70000 60%, #fcd50e 80%);

并且也没有使用这些百分比，仍然是相同的。

Answer 1

迟到了。但这是我的解决方案，您可以在颜色上设置 % 开始和停止的位置并重叠以下将创建硬停止。

.gradient{
  height:3px;
  background-image:linear-gradient(to left, 
    #252525 0% 20%, 
    #f5f5f5 20% 40%,
    #00b7b7 40% 60%,
    #b70000 60% 80%,
    #fcd50e 80% 100%
  );
}

<div class='gradient' />

Answer 2

你需要将关闭设置在一起以实现这一点，因此每个颜色值停止2次：

background: -webkit-linear-gradient(left, #252525 19%,#f5f5f5 20%,#f5f5f5 39%,#00b7b7 40%,#00b7b7 59%,#b70000 60%,#b70000 79%,#fcd50e 80%,#fcd50e 100%);
background: linear-gradient(to right, #252525 19%,#f5f5f5 20%,#f5f5f5 39%,#00b7b7 40%,#00b7b7 59%,#b70000 60%,#b70000 79%,#fcd50e 80%,#fcd50e 100%);

我使用此工具生成css渐变，它非常棒且非常有用： http://www.colorzilla.com/gradient-editor/#252525+19,f5f5f5+20,f5f5f5+39,00b7b7+40,00b7b7+59,b70000+60,b70000+79,fcd50e+80,fcd50e+100

Answer 3

为相邻的色标指定相同的停止位置应产生硬边。标准的线性渐变语法允许颜色提示（减少此背景样式的详细程度），但并非所有浏览器都支持它。

hr {
  background-image: -webkit-linear-gradient(left, #252525 0%, #252525 20%, #f5f5f5 20%, #f5f5f5 40%, #00b7b7 40%, #00b7b7 60%, #b70000 60%, #b70000 80%, #fcd50e 80%);
  height: 10px;
}

<hr>

Answer 4

这样的多重渐变怎么样：

＆＃13;

.line {
  height:5px;
  background-image:
    linear-gradient(red,red),
    linear-gradient(blue,blue),
    linear-gradient(yellow,yellow),
    linear-gradient(purple,purple);
  background-size:
    calc(1 * (100% / 4)) 100%,
    calc(2 * (100% / 4)) 100%,
    calc(3 * (100% / 4)) 100%,
    calc(4 * (100% / 4)) 100%;
  background-repeat:no-repeat;
}

＆＃13;

<div class="line">
</div>

＆＃13;

Answer 5

我使用 repeating-linear-gradient() 解决了这个问题：

<!DOCTYPE html>
<html>
<head>
<style>
.myCSSrule {
    width:400px;
    height:400px;
    background: rgb(29,60,253);
    background: linear-gradient(90deg, rgba(29,60,253,1) 12.5%, rgba(210,69,252,1) 25%, rgba(252,69,69,1) 37.5%, rgba(252,145,69,1) 50%, rgba(251,252,69,1) 62.5%, rgba(193,252,69,1) 75%, rgba(36,196,49,1) 87.5%, rgba(47,247,238,1) 100%);
}
</style>
</head>
<body>

<div class="myCSSrule">
</div> 


</body>
</html>

css中的硬边渐变？

5 个答案: