CSS线性背景颜色

Question

如何在div中制作线性背景单色（两边斜率）。请帮忙

   background: rgb(0, 255, 113);
background: -moz-linear-gradient(49deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%);
background: -webkit-linear-gradient(49deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%);
background: -o-linear-gradient(49deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%);
background: -ms-linear-gradient(49deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%);
background: linear-gradient(139deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%);

https://jsfiddle.net/52254dte/

Answer 1

如果您不想要渐变...则删除渐变...

即。仅使用background: rgb(0, 255, 113); ...
（或任何你想要的单一颜色。）

Fiddle update

清晰度之后....只需在渐变中添加颜色停止.....

div {
	text-align: center;
  color: #fff;
  margin: 30px;
  padding: 10px 0;
  
  
	background: rgb(0, 255, 113);
background: -moz-linear-gradient(49deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%);
background: -webkit-linear-gradient(49deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%);
background: -o-linear-gradient(49deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%);
background: -ms-linear-gradient(49deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%);
background: linear-gradient(139deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%);}

<div>Some Text</div>

Answer 2

使用渐变，但使颜色的实际变化非常小（例如0.1％）

linear-gradient(135deg, #ff0000 0%, #ff0000 29.9%, #ffffff 30%, #ffffff 70%, #ff0000 70.1%, #ff0000 100%)

使用这种方法，我们从0％ - 29.9％变为纯色，然后从29.9％ - 30％过渡到另一种颜色。

div {
  display: block;
  width: 300px;
  height: 100px;
  
  background: -moz-linear-gradient(-45deg, #ff0000 0%, #ff0000 29.9%, #ffffff 30%, #ffffff 70%, #ff0000 70.1%, #ff0000 100%);
  background: -webkit-linear-gradient(-45deg, #ff0000 0%, #ff0000 29.9%, #ffffff 30%, #ffffff 70%, #ff0000 70.1%, #ff0000 100%);
  background: linear-gradient(135deg, #ff0000 0%, #ff0000 29.9%, #ffffff 30%, #ffffff 70%, #ff0000 70.1%, #ff0000 100%);
}

<div></div>