如何在CSS中去除渐变的淡化效果

Question

我在HTML代码中有以下按钮：
<input type="button" id="button" title="button" name="button" class="button" value="button" />
并且这个CSS被附加了。

.button{
  width:200px;
  height:;50px;
  position:relative;
  top:50px;
  left:200px;
  background:-webkit-linear-gradient(180deg,white 33%,blue 67%)
}

https://jsfiddle.net/mudkcuqj/

现在我的灵魂渴望消除由gradient引起的可恶的淡化效果。

- user7302801

Answer 1

如果您想要消除从蓝色到白色的渐变，并且希望在一个点之前仍然是蓝色，然后变成白色，请使颜色始终从同一点开始和结束。

.button{
  width:200px;
  height:50px;
  position:relative;
  top:50px;
  left:200px;
  background:linear-gradient(180deg,white 33%,blue 33%);
  background:-webkit-linear-gradient(180deg,white 33%,blue 33%);
}

<input type="button" id="button" title="button" name="button" class="button" value="button" />

- Michael Coker

---

谢谢老兄，这太棒了，完美无瑕，优秀卓越，非常出色，无可挑剔，达到完美境界，没有任何缺陷，理想化，无法仿效，无与伦比，完美无瑕，精致绝美，至臻完美。 - user7302801

@user7302801 不用谢，不客气，别提了，很高兴能帮忙，没问题，一点都不，别担心，不用在意，当然。 - Michael Coker

这对我来说适用于除Safari之外的所有浏览器。但在Safari中会重复自己。为了避免重复，我添加了background-attachment: fixed，但是开始/停止颜色不再起作用。有什么想法吗？ - Kirsten

@Kirsten，我在Safari中看起来还不错，尽管我刚刚注意到由于10/21的编辑中缺少分号，背景声明根本没有起作用。您可以使用更新后的代码再次检查一下吗？如果您仍然看到它-请问您使用的是哪个版本的Safari？ - Michael Coker

在Firefox中，添加-webkit-前缀实际上会以不同的方式处理角度。如果我对于"linear-gradient"使用了90度，那么对于"-webkit-linear-gradient"我需要使用0度来保持相同的方向。 - user1589375

Answer 2

在“白色33%”和“蓝色67%”之间添加“蓝色0.1%”即可。

.button{
  width:200px;
  height:50px;
  position:relative;
  top:50px;
  left:200px;
  background:linear-gradient(180deg,white 33%,blue 0.1%,blue 67%);
}

- Plazer

---

完美运作，需要指出的是，最后两种颜色必须相同。 - user14850280