CSS Fortschrittsbalken Textfarbe für Kontrastmittel gefüllt und leer Hintergründe?
https://stackoverflow.com/questions/1080708
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich mag XHTML + CSS Statusleiste mit Kontrastfarben zwischen gefüllten und leeren Hintergrundflächen haben.
Ich habe ein Problem mit Textfarbe. Da gefüllt und leer Hintergründe zu Kontrast sind (dies ist eine Voraussetzung), zu bleiben lesbar der Text doppelt gefärbt sein sollte Gegensatz zu den beiden von ihnen zu sein. Das Bild sollte es besser erklären als Worte:
Fortschrittsbalken mit dunkelblauem gefülltem Bereich und weißen leeren Hintergrund http : //drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png Beispiel des Problems http://drdaeman.pp.ru/tmp /20090703/progress-bar-text-problem.png
Meine aktuellen Fortschrittsbalken Implementierung ist trivial, aber als Beispiel oben zeigt, kann der Text schwer in einigen Fällen zu lesen, das ist genau das ein Problem, das ich lösen will.
Mein aktueller (vereinfacht) Implementierung Versuch (fehlschlägt, weil overflow: hidden nicht ohne Positionierung div.progress funktioniert das ich kann nicht Stellung wegen inneren span des width):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Progress bar test</title>
<style type="text/css">
div.progress_bar {
border: 1px #ccc solid; position: relative;
text-align: center; height: 32px;
}
div.progress_bar .progress {
height: 32px;
overflow: hidden; /* This does NOT work! */
}
div.progress_bar .progress div {
position: absolute; width: 100%; height: 32px;
z-index: 30; overflow: hidden;
background-color: #44a;
}
div.progress_bar span {
position: absolute; top: 0; left: 0; width: 100%;
z-index: 20;
color: #000;
}
div.progress_bar .progress span {
position: absolute; top: 0; left: 0; width: 100%;
z-index: 40;
color: #eee;
}
</style>
</head>
<body>
<!-- Can be of any (unknown) width. Think of "width: auto".
The 400px value is just to keep it small on a big monitor.
DON'T rely on it! -->
<div id="container" style="width: 400px;">
<div class="progress_bar">
<!-- div.progress is a dark filled area container -->
<div class="progress" style="width: 51%;">
<!-- Actually dark filled area -->
<div style="width: 51%;"></div>
<!-- Text (white).
Does not clip, even with overflow: hidden on parent! -->
<span>This is a test</span>
</div>
<!-- Text (black) -->
<span>This is a test</span>
</div>
</div>
</body>
</html>
Live-Version des obigen: http://drdaeman.pp.ru/tmp/ 20090703 / test2.html
Zurück Versuch: http://drdaeman.pp.ru/tmp/20090703/test.html
Die Bilder werden GIMP bearbeitet Prototypen und nicht genau das, was dieser Code angezeigt.
hinzufügen: Ich danke Ihnen allen, vor allem Meep3D, Nosredna und Lachlan! Allerdings habe ich immer noch ein Problem - in meinem Fall Fortschrittsbalken sollte keine feste Breite haben und alle horizontal verfügbaren Platz nehmen (width: auto; oder width: 100% sind akzeptabel). Aber ohne width: 400px Regel Lachlan Code bricht. Und ich würde immer noch gerne JavaScript vermeiden verwenden, wenn das möglich ist.
Lösung
Wie pro Meep3D Vorschlag, nehmen Sie 2 Kopien des Textes.
Wickel jeweils in einem div mit der gleichen Breite wie der Behälter. Die „obere“ div mit einem anderen div welche Clips auf dem gewünschten Prozentsatz gewickelt wird.
Update:. Beseitigte die Fixbreiten
Die „obere“ div den inversen Prozentsatz seiner Umhüllung bemessen ist.
<html>
<head>
<style type="text/css">
#container {
position: relative;
border: 1px solid;
text-align: center;
width: 400px;
height: 32px;
}
.black-on-white {
height: 32px;
color: #000;
}
.white-on-black {
height: 32px;
color: #fff;
background-color: #44a;
}
.wrapper {
width: 53%;
overflow: hidden;
position: absolute;
top: 0; left: 0;
}
.black-on-white {
width: 100%;
}
.white-on-black {
width: 188.7%;
}
</style>
</head>
<body>
<div id="container">
<div class="wrapper">
<div class="white-on-black">
<span>This is a test</span>
</div>
</div>
<div class="black-on-white">
<span>This is a test</span>
</div>
</div>
</body>
</html>
Andere Tipps
Was ist eine zweite Kopie des Fortschrittsbalkens Text innerhalb des div setzen, und stellen Überlauf versteckt die divs, so dass es mit ihm offenbart?
-
Update:. Ich bin nicht auch ein JavaScript-Experte, aber ich bin sicher, dass Sie die Breite eines Objekts herausfinden können, und stellen Sie dann die Offsets auf der Grundlage, dass, wenn die Breite flexibel ist, wie Sie sagen,
Sie könnten:
- Finden Sie eine graue, das entspricht
- Verwenden Sie JavaScript, um die Farbe zwischen Weiß und Schwarz dynamisch zu ändern, je nachdem, wo es ist
- Machen Sie die mittlere Farbe des Hintergrundes Gradienten näher an weiß, und immer dunkler Text verwenden
- Setzen Sie den Fortschritt outisde Eingabefeld:
[######### ] 50 %
Sie können einen Textschatten für „Prozent“ Text. Der einzige Nachteil ist, dass es nur in den neuesten Browsern funktionieren würde. Nur Firefox 3.5, Safari (alle Versionen) und Chrome 2+ unterstützen.
Hier ist eine Demo von text-shadow in einer Weise, die Ihren Fortschritt lesbar machen würde.
http://www.w3.org/Style/Examples/007/ text-shadow # weiß
Wenn Sie bereit sind, mehr JavaScript zu verwenden, können Sie diese jQuery-Plugin versuchen:
http://kilianvalkhof.com/2008/ Javascript / text-shadow-in-ie-mit-jquery /
Der Artikel sagt, es funktioniert in IE nur, aber es funktioniert in Chrome 3 (was ich verwende), Firefox 3.5, Internet Explorer und Safari. Es kann in älteren Browsern arbeiten, aber ich habe es nicht getestet.
Meep3D hat die richtige Antwort. Zwei Versionen der Box. Reveal n% des obersten.
Weitere Optionen:
- Legen Sie eine durchscheinende Feld unter der Nummer, die entweder auf den Bereich dunkelt für eine weiße Zahl oder hellt die Bereich für eine schwarze Zahl.
- Verwenden Sie Rot und Weiß als Hintergründe und eine schwarze Zahl. (Problem hier ist rot wird mit Fehler verbunden sind, so dass Sie spielt mit anderen Kombinationen von drei Farben, die alle einen hohen Kontrast sind gegeneinander an.)
