文字一部分黑色一部分白色的效果用css做怎么实现？_html/css

文字一部分黑色一部分白色的效果用css做怎么实现？_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 12:23:24

asal

2453 orang telah melayarinya

参考上面的，用div+css+背景图片构成的，可是中间的文字感觉不协调，要是蓝色那边的文字是白色的就好了。

用css怎样达到文字一部分黑色一部分白色的效果呢？

回复讨论(解决方案)

实现不了吧？你可以让百分比在进度条的上面居右显示

你可以试一下，这种方法，进度条下面是一个DIV，跟现在这个一样不变，然后，上进度条也用DIV,，并且，这上面也写一样的文字，且颜色不一样，这里需要注意上层DIV何时写字，何时用PADDING-LEFT，让他们的字重合。且要用到OVERFLOW：HIDDEN;这种方法都无法就没有办法了

直接用jQuery progressBar 进度条插件

用双层来实现，上一层白字蓝底，下层黑字白底控制上一层宽度就行了

两种颜色字体随进度条切换

既然是进度条，肯定是一直计算的
你计算出字体的蓝底出现就转成白色就行了
其实字体、进度条的大小固定，也就是大概达到某个（或几个）百分比的时候，多算几次就知道了

楼上有几个说的不错得写两遍57% 一个白色的一个灰色的都是水平、垂直居中
灰色的全显示就可以了，白色字体所在的div要读取蓝条所在div的宽度，然后设置overflow:hidden;
其他的没有更好的办法 css3倒是可以勉强实现但是控制起来很费劲而且在IE9一下的版本还体现不出来样式

好好试试吧

<style>.process{position:relative;height:30px;width:300px;border:solid 1px black;line-height:30px;color:White;font-weight:bold}.process .top,.process .bottom{position:absolute;left:0px;top:0px;height:30px;width:100%;overflow:hidden;color:Black;text-align:center;}.process .top{color:white;z-index:1;background:blue;width:0%}.process .word{left:140px;position:absolute;}/*定死文字位置就行，依据.process容器的宽度来调整left，让文字比较居中一点，只需要更改top的宽度，就会自动显示白色文字*/</style><div class="process" id="dvProcess"><div class="top"><div class="word"></div></div><div class="bottom"><div class="word"></div></div></div><script>    var percent = 0, divs, timer;    window.onload = function () {        divs = document.getElementById('dvProcess').getElementsByTagName('div');        timer = setInterval(function () {            percent += 5;            divs[0].style.width = divs[1].innerHTML = divs[3].innerHTML = percent + '%';            if (percent == 100) clearInterval(timer);        }, 1000);    }</script>

Salin selepas log masuk

<style>.process{position:relative;height:30px;width:300px;border:solid 1px black;line-height:30px;color:White;font-weight:bold}.process .top,.process .bottom{position:absolute;left:0px;top:0px;height:30px;width:100%;overflow:hidden;color:Black;text-align:center;}.process .top{color:white;z-index:1;background:blue;width:0%}.process .word{left:140px;position:absolute;}/*定死文字位置就行，依据.process容器的宽度来调整left，让文字比较居中一点，只需要更改top的宽度，就会自动显示白色文字*/</style><div class="process" id="dvProcess"><div class="top"><div class="word"></div></div><div class="bottom"><div class="word"></div></div></div><script>    var percent = 0, divs, timer;    window.onload = function () {        divs = document.getElementById('dvProcess').getElementsByTagName('div');        timer = setInterval(function () {            percent += 5;            divs[0].style.width = divs[1].innerHTML = divs[3].innerHTML = percent + '%';            if (percent == 100) clearInterval(timer);        }, 1000);    }</script>

Salin selepas log masuk

mark

让57%自动在左边蓝色居中即可，字体改成白色，没必要在中间

<style>.process{position:relative;height:30px;width:300px;border:solid 1px black;line-height:30px;color:White;font-weight:bold}.process .top,.process .bottom{position:absolute;left:0px;top:0px;height:30px;width:100%;overflow:hidden;color:Black;text-align:center;}.process .top{color:white;z-index:1;background:blue;width:0%}.process .word{left:140px;position:absolute;}/*定死文字位置就行，依据.process容器的宽度来调整left，让文字比较居中一点，只需要更改top的宽度，就会自动显示白色文字*/</style><div class="process" id="dvProcess"><div class="top"><div class="word"></div></div><div class="bottom"><div class="word"></div></div></div><script>    var percent = 0, divs, timer;    window.onload = function () {        divs = document.getElementById('dvProcess').getElementsByTagName('div');        timer = setInterval(function () {            percent += 5;            divs[0].style.width = divs[1].innerHTML = divs[3].innerHTML = percent + '%';            if (percent == 100) clearInterval(timer);        }, 1000);    }</script>

Salin selepas log masuk

效果达到了，好牛x 研究下