How to achieve the effect of making part of the text black and part white using css? _html/css

How to achieve the effect of making part of the text black and part white using css? _html/css_WEB-ITnose

WBOY

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

Original

2452 people have browsed it

Refer to the above, it is composed of div css background image, but the text in the middle feels inconsistent. It would be better if the text on the blue side was white.

How to use css to make part of the text black and part white?

Reply to discussion (solution)

Can’t do it? You can make the percentage display on the right side of the progress bar

You can try this method. There is a DIV under the progress bar, which remains the same as now. Then, use DIV for the upper progress bar. , and the same text is written on it, but the colors are different. Here you need to pay attention to when the upper DIV writes text and when to use PADDING-LEFT to make their words overlap. And you need to use OVERFLOW: HIDDEN; if this method is not possible, there is no other way

Directly use the jQuery progressBar progress bar plug-in

Use double layers to achieve it, the upper layer has white characters and blue background, and the lower layer Black text and white background Just control the width of the previous layer

The two color fonts switch with the progress bar

Since it is a progress bar, it must be calculated all the time
You calculate the blue color of the font Just turn it into white when the bottom appears
In fact, the size of the font and progress bar is fixed, that is, when it reaches a certain (or several) percentage, you can know it by counting a few times

Upstairs A few of them said well that you have to write 57% twice, one white and one gray, both horizontally and vertically centered
The gray one can be fully displayed. The div where the white font is located needs to read the width of the div where the blue bar is located. Then set overflow:hidden;
There is no other better way. CSS3 can be barely implemented, but it is very difficult to control, and the style cannot be reflected in IE9 or lower versions

Give it a try

<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>

Copy after login

<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>

Copy after login

mark

Just let 57% automatically center on the blue on the left, change the font to white, there is no need to put it in the middle

<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>

Copy after login

The effect is achieved, it’s awesome x. Let’s study it