div {
position:absolute;
height:200px
}
/* A white bottom layer */
#whitebg {
background: white;
width:400px;
z-index:1
}
/* A black layer on top of the white bottom layer */
#blackbg {
background: black;
width:100px;
z-index:2
}
/* Some white text on top with blend-mode set to 'difference' */
span {
position:absolute;
font-family: Arial, Helvetica;
font-size: 100px;
mix-blend-mode: difference;
color: white;
z-index: 3
}
/* A red DIV over the scene with the blend-mode set to 'screen' */
#makered {
background-color: red;
mix-blend-mode: screen;
width:400px;
z-index:4
}
.progress {
display: block;
margin: 0;
/* Choose desired padding/height in coordination with font size */
padding: 10px;
height: 28px;
}
#back {
position: relative;
/* Choose a border to your liking, or none */
border: 1px solid lightgray;
/* Choose your desired text attributes */
text-align: center;
font-family: Calibri, "Sans Serif";
font-size: 16pt;
/* Set the desired width of the whole progress bar */
width: 75%;
/* Choose the desired background and text color */
background-color: white;
color: black;
}
#front {
position: absolute;
left: 0;
top: 0;
/* Choose the desired background and text colors */
background-color: navy;
color: white;
}
#boundbox {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
我使用jQuery以编程方式设置进度百分比，并确保 * front * 的宽度与 * back * 的宽度匹配，并且它们具有相同的文本，这也可以用纯Javascript轻松完成。
// Set *front* width to *back* width
// Do this after DOM is ready
$('#front').width($('#back').width())
// Based upon an event that determines a content change
// you can set the text as in the below example
percent_complete = 45 // obtain this value from somewhere; 45 is just a test
$('#front').text(percent_complete.toString() + '% complete')
$('#back span').text($('#front').text())
bb_width = (percent_complete * $('#back').width())/100
$('#boundbox').css('width', bb_width.toString())
4条答案
按热度按时间rdlzhqv91#
有一个CSS属性叫做mix-blend-mode，但是IE不支持，我推荐使用pseudo elements，如果你想支持IE6和IE7，你也可以使用two DIVs代替伪元素。
fquxozlt2#
使用
mix-blend-mode。http://jsfiddle.net/1uubdtz6/
u4dcyp6a3#
我知道这是一个老问题，但我想添加另一个在了解
mix-blend-mode之前一直使用的解决方案。我们的想法是将信息复制到两个图层中，一个是 * back *，另一个是 * front *，其中 * back * 和 * front * 的背景和文本颜色不同。它们在尺寸和文本上是相同的。在这两个图层之间，我使用一个剪切框
div来剪切 * front *。（顶部）层调整到所需宽度，显示未剪切的 * 前 * 层，并在剪切窗口外显示 * 后 * 层。这类似于可接受答案中的"两格"解决方案，但使用了额外的剪切框。此解决方案的优点是，如果需要，可以轻松地将文本居中，并且可以简单、直接地选择颜色。
超文本：
CSS：
我使用jQuery以编程方式设置进度百分比，并确保 * front * 的宽度与 * back * 的宽度匹配，并且它们具有相同的文本，这也可以用纯Javascript轻松完成。
这里有一把小提琴：Progress bar.
我在Chrome、Firefox、Microsoft Edge和IE版本11中进行了测试。
68de4m5k4#
我觉得这样比较容易理解。