23

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

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

请提供指点。

4

5 回答 5

48

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

伪元素方法：

<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: linear-gradient(to right, 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%;
}
于 2013-09-05T22:53:27.940 回答
8

是的，通过使用渐变的停止，即使只有一个 div 也是可能的；

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%);
}
于 2013-09-05T23:07:43.133 回答
3

我使用 Josh C 的回答做了一个进度条动画：http: //jsfiddle.net/mjEDY/1/

HTML：

<div class="prog">
    <div id="filler" class="filler"></div>
</div>

CSS：

.prog {
    width:200px;
    height:50px;
    border:1px solid black;
}
.filler {
    width:0%;
    height:50px;
    background-color:black;
}

JS：

var stepSize = 50;
setTimeout((function() {
    var filler = document.getElementById("filler"),
        percentage = 0;
    return function progress() {
        filler.style.width = percentage + "%";
        percentage +=1;
        if (percentage <= 100) {
            setTimeout(progress, stepSize);
        }
    }

}()), stepSize);

它使用了一些高级的 javascript 技巧（用于动画的闭包和 setTimeouts），但你明白了。稍微转动一下，你就可以根据你想要的任何东西使用它来创建一个进度条，也不需要 js 插件 :)

于 2013-09-05T23:15:55.043 回答
2

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

它看起来很酷：这是jsFiddle

于 2013-09-05T22:52:57.287 回答
2

您还可以使用包装器 div 将 CSS3 的背景属性用于进度条。

var stepSize = 50;
setTimeout((function() {
    var wrapper = document.getElementById("imageWrapper"),
        image = document.getElementById("preview"),
        percentage = 0;
    return function progress() {
        wrapper.style.backgroundSize = percentage + "% 100%";
        image.innerHTML = percentage + "%";
        percentage +=1;
        if(percentage <= 100){
            setTimeout(progress, stepSize);
            if(percentage == 100) image.style.opacity = 1;
        }
    }
    
}()), stepSize);
div#imageWrapper{
	width:100px;
	height:120px;
	background: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==') no-repeat;
	background-size:0% 100%;
	background-position:0 100px;
}
div#preview{
	width:100px;
	height:100px;
    background: url('http://sugarbird.skyauction.com/content/qart_140775b.jpg');
	background-size:cover;
	opacity: 0.5;
}
<div id="imageWrapper">
    <div id="preview"></div>
</div>

于 2014-12-12T00:12:14.917 回答