填充背景颜色仅占总宽度的50%

Question

是否可以在CSS中填充背景颜色仅占其总宽度的50%？

我正在尝试制作一个进度条,我需要根据"%"进度填充背景颜色.

请提供指示.

Answer 1

有多种不同的方法可以实现这一目标.

伪元素方法:

<div class="progress"></div>

这里的例子

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}
.progress:after {
    content:'\A';
    position:absolute;
    background:black;
    top:0; bottom:0;
    left:0; 
    width:50%; /* Specify the width.. */
}

线性渐变方法:

这种方法的优点是你可以指定多种不同的颜色..

这里的例子

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    background: -webkit-linear-gradient(left, black 50%, white 50%);
    background: -moz-linear-gradient(left, black 50%, white 50%);
    background: -ms-linear-gradient(left, black 50%, white 50%);
    background: linear-gradient(left, black 50%, white 50%);
}

没有JS/JQUERY的动画

这些方法中的任何一种都可以使用纯CSS进行动画处理.

这里的例子

.progress:after {
    /* other styling .. */
    width:50%; /* End width.. */
    -webkit-animation: filler 2s ease-in-out;
    -moz-animation: filler 2s ease-in-out;
    animation: filler 2s ease-in-out;
}

@-webkit-keyframes filler {
    0% {
        width:0;
    }
}

过渡方法

这里的例子

.progress:after {
    /* other styling.. */
    width:0;
    transition:all 2s;
    -webkit-transition:all 2s;
}
.progress:hover:after {
    width:50%;
}

Answer 2

是的，通过使用渐变止挡，即使是一格也可以实现；

的HTML

<div></div>

的CSS

div {

  width:400px;
  height:400px;


  background: -webkit-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: -moz-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: -o-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: -ms-linear-gradient(left, #00ff00 50%, #ff0000 50%);
  background: linear-gradient(left, #00ff00 50%, #ff0000 50%);
}

Answer 3

您可以使用 100% 高度的绝对值div，并使用 javascript 更改其宽度。

它看起来很酷：这是jsFiddle