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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/427491.html

猜你在找的CSS相关文章