Heim  >  Artikel  >  Web-Frontend  >  文字一部分黑色一部分白色的效果用css做怎么实现?_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:23:242448Durchsuche



参考上面的,用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>

<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>
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>
效果达到了,好牛x  研究下

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn