Question

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

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

fiddle

Answer 3

目前我还没有想到如何只使用CSS渐变和单个元素来做这件事。

根据你的例子，并假设一个额外的div是可以的，那么这里是一种没有渐变的替代方法（http://jsfiddle.net/jpftqc26/2/）：

HTML

<body class="background">
    <div class="foreground"/>
</body>

CSS

html, body {
    width: 100%;
    height: 100%;
}

.background {
    background-color: #000000;
}
.foreground {
    background-color: #ff0000;
    width: 100%;
    max-width: 500px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

这会产生相同的效果，使用一个额外的元素，并提供一个红色前景，最大宽度将增加到500px - 超出它的两侧全黑。如果您希望总是的红色为500px宽，则只需删除max-width规则并将width更改为500px。

Answer 4

我认为没有添加任何html元素的最佳解决方案是使用图像作为背景：

.test_gradient {
    background: url('http://s14.postimg.org/zf0kd84lt/redline.jpg') repeat-y #000 center top;
}

http://jsfiddle.net/Monteduro/jpftqc26/3/

Answer 5

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

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

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

5 个答案: