请看一下这个小提琴:http://jsfiddle.net/jpftqc26/
一个CSS渐变,从左边开始变黑,变成红色,然后再变成黑色.真的很简单.
有什么方法可以让红色部分宽500px,黑色部分填满屏幕,无论分辨率如何?中间有红色,就像小提琴一样.
有没有办法在CSS渐变中定义颜色停止之间的像素宽度?
码:
.test_gradient {
background:
linear-gradient(
to right,#000000,#000000 20%,#ff0000 20%,#ff0000 80%,#000000 80%
);
最佳答案
如果你想要黑色部分是灵活的,红色部分是固定的,你可以使用这样的东西:
原文链接:https://www.f2er.com/css/427491.htmlhtml{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;
}