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

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

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

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

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

码：

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

最佳答案

如果你想要黑色部分是灵活的,红色部分是固定的,你可以使用这样的东西：

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;
}

DEMO

原文地址：https://www.jb51.cc/css/427491.html