參考上面的，用div+css+背景圖片構成的，可是中間的文字感覺不協調，要是藍色那邊的文字是白色的就好了。

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

回復討論(解決方案)

實現不了吧？你可以讓百分比在進度條的上面居右顯示

你可以試一下，這種方法，進度條下面是一個DIV，跟現在這個一樣不變，然后，上進度條也用DIV,，并且，這上面也寫一樣的文字，且顏色不一樣，這里需要注意上層DIV何時寫字，何時用PADDING-LEFT，讓他們的字重合。且要用到OVERFLOW：HIDDEN;這種方法都無法就沒有辦法了

直接用jQuery progressBar 進度條插件

用雙層 來實現，上一層 白字藍底，下層黑字白底 控制上一層寬度就行了

兩種顏色字體隨進度條切換

既然是進度條，肯定是一直計算的

你計算出字體的藍底出現就轉成白色就行了

其實字體、進度條的大小固定，也就是大概達到某個(或幾個)百分比的時候，多算幾次就知道了

樓上有幾個說的不錯 得寫兩遍57% 一個白色的 一個灰色的 都是水平、垂直居中

灰色的全顯示就可以了，白色字體所在的div要讀取藍條所在div的寬度，然后設置overflow:hidden;

其他的沒有更好的辦法 css3倒是可以勉強實現 但是控制起來很費勁 而且在IE9一下的版本還體現不出來樣式

好好試試吧

mark

讓57%自動在左邊藍色居中即可，字體改成白色，沒必要在中間

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

聲明：本文原創發布php中文網，轉載請注明出處，感謝您的尊重！如有疑問，請聯系admin@php.cn處理

總結

以上是生活随笔為你收集整理的HTML在黑色框中加白色文字,文字一部分黑色一部分白色的效果用css做怎么实现？_html/css_WEB-ITnose...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。