CSSを使用してテキストの一部を黒く、一部を白くする効果を実現するにはどうすればよいですか? _html/css

CSSを使用してテキストの一部を黒く、一部を白くする効果を実現するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:23:24

オリジナル

2453 人が閲覧しました

上記を参照してください。div+css+背景画像で構成されていますが、真ん中の文字が矛盾しているように感じます。青い側の文字は白の方が良いでしょう。

CSSを使用してテキストの一部を黒く、一部を白くするにはどうすればよいですか?

ディスカッションへの返信（解決策）

達成できませんか？プログレスバーの右側にパーセンテージを表示することができます

この方法を試すことができます。プログレスバーの下には、現在のものと同じままの DIV があります。その後、上部のプログレスバーも DIV を使用します。上にも同じテキストが書かれていますが、色が異なります。ここで注意する必要があるのは、上の DIV に書き込むタイミングと、PADDING-LEFT を使用して単語を重ねるタイミングです。この方法が機能しない場合は、OVERFLOW: HIDDEN を使用する必要があります。

jQuery progressBar プログレスバープラグインを直接使用します。

それを実現するには、二重レイヤーを使用します。青色の背景、下のレイヤーは上のレイヤーを制御するために黒の文字と白の背景があります。幅は十分です

プログレスバーで2色のフォントが切り替わります

プログレスバーなので常に計算する必要があります。

フォントの青い背景を計算して、表示されるときに白に変えることができます
実際、フォントとプログレスバーのサイズは、特定の（またはいくつかの）パーセンテージに達すると固定されます。何度か計算してみるとわかります

上の階の人がよく言いました。1 つは白、もう 1 つはグレーです。完全に表示してください。灰色の色。白いフォントが配置されている 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>

ログイン後にコピー

マーク

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>

ログイン後にコピー

効果が出てるうん、すごい×勉強してみよう