CSS渐变:以像素为单位定义宽度

Question

请看看这个小提琴:http://jsfiddle.net/jpftqc26/

一个CSS渐变,从左边开始变黑,变成红色,然后再变成黑色.真的很简单.

有什么方法可以让红色部分宽500px,黑色部分填满屏幕,无论分辨率如何？中间有红色,就像小提琴一样.

有没有办法在CSS渐变中定义颜色停止之间的像素宽度？

码:

.test_gradient {
background: 
linear-gradient(
      to right, 
      #000000,
      #000000 20%,
      #ff0000 20%,
      #ff0000 80%,
      #000000 80%
    );

Answer 1

是.你可以用硬像素点和calc函数的使用来做到这一点.只需将它们设置为:

http://jsfiddle.net/jpftqc26/9/

CSS:

.test_gradient {
background: 
linear-gradient(
      to right, 
      #000000 0px, /* Starting point */
      #000000 calc(50% - 250px), /* End black point */
      #ff0000 calc(50% - 250px), /* Starting red point */
      #ff0000 calc(50% + 250px), /* End red point */
      #000000 calc(50% + 250px), /* Starting black point */
      #000000 100% /* End black point */
    );

Answer 2

另一种不使用 calc() 的方法是使用 2 个不同的梯度

.test_gradient {
background-image: 
linear-gradient( to left,  #ff0000 0px,  #ff0000 250px,  #000000 100px), linear-gradient( to right,   red 0px,  #ff0000 250px,  #000000 100px);

background-size: 50.1% 1000px;
background-position: top left, top right;
background-repeat: no-repeat;
}

一个向右，一个向左，每一个都有总宽度的一半

小提琴

Answer 3

如果你希望黑色部分是灵活的而红色部分是固定的，你可以使用这样的东西：

html{height:100%;}
.test_gradient {
    background: #000000;
    position:relative;
    margin:0;
    height:100%;
}
.test_gradient:after{
    content:'';
    position:absolute;
    top:0;
    height:100%;
    width:500px;
    left:50%;
    margin-left:-250px;
    background:#f00;
}

演示版