当前位置:Gxlcms > html代码 > 文字一部分黑色一部分白色的效果用css做怎么实现?_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:34人阅读

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

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


回复讨论(解决方案)

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

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

直接用jQuery progressBar 进度条插件

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

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

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

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

好好试试吧

mark

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

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

人气教程排行