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

无·法 2013-08-14 11:16:04


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

用css怎样达到文字一部分黑色一部分白色的效果呢?
...全文
614 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
persuit666 2013-08-15
  • 打赏
  • 举报
回复
让57%自动在左边蓝色居中即可,字体改成白色,没必要在中间
街头小贩 2013-08-15
  • 打赏
  • 举报
回复
引用 8 楼 showbo 的回复:
<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
Go 旅城通票 2013-08-15
  • 打赏
  • 举报
回复
<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>
无·法 2013-08-15
  • 打赏
  • 举报
回复
引用 8 楼 showbo 的回复:
<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 研究下
潮起潮落 2013-08-14
  • 打赏
  • 举报
回复
两种颜色字体随进度条切换
fzfei2 2013-08-14
  • 打赏
  • 举报
回复
用双层 来实现,上一层 白字蓝底,下层黑字白底 控制上一层宽度就行了
长明 2013-08-14
  • 打赏
  • 举报
回复
直接用jQuery progressBar 进度条插件
bichir 2013-08-14
  • 打赏
  • 举报
回复
你可以试一下,这种方法,进度条下面是一个DIV,跟现在这个一样不变,然后,上进度条也用DIV,,并且,这上面也写一样的文字,且颜色不一样,这里需要注意上层DIV何时写字,何时用PADDING-LEFT,让他们的字重合。且要用到OVERFLOW:HIDDEN;这种方法都无法就没有办法了
街头小贩 2013-08-14
  • 打赏
  • 举报
回复
实现不了吧?你可以让百分比在进度条的上面居右显示
sunwenjunnet 2013-08-14
  • 打赏
  • 举报
回复
楼上有几个说的不错 得写两遍57% 一个白色的 一个灰色的 都是水平、垂直居中 灰色的全显示就可以了,白色字体所在的div要读取蓝条所在div的宽度,然后设置overflow:hidden; 其他的没有更好的办法 css3倒是可以勉强实现 但是控制起来很费劲 而且在IE9一下的版本还体现不出来样式 好好试试吧
ImN1 2013-08-14
  • 打赏
  • 举报
回复
既然是进度条,肯定是一直计算的 你计算出字体的蓝底出现就转成白色就行了 其实字体、进度条的大小固定,也就是大概达到某个(或几个)百分比的时候,多算几次就知道了

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧