Цвет текста индикатора выполнения CSS для контрастно заполненных и пустых фонов?
https://stackoverflow.com/questions/1080708
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я хочу иметь индикатор выполнения XHTML + CSS с контрастными цветами между заполненными и пустыми областями фона.
У меня проблема с цветом текста.Поскольку заполненный и пустой фон слишком контрастны (это обязательное условие), чтобы текст оставался читаемым, он должен быть двухцветным, чтобы контрастировать с ними обоими.Изображение должно объяснить это лучше, чем слова:
Индикатор выполнения с темно-синей заполненной областью и белым пустым фоном http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png Пример проблемы http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png
Моя текущая реализация индикатора выполнения тривиальна, но, как показывает приведенный выше пример, в некоторых случаях текст может быть трудночитаемым, и это именно та проблема, которую я хочу решить.
Моя текущая (упрощенная) попытка реализации (завершается неудачей, потому что overflow: hidden не работает без позиционирования div.progress который я не могу позиционировать из-за внутреннего span's 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>
Живая версия вышеприведенного: http://drdaeman.pp.ru/tmp/20090703/test2.html
Предыдущая попытка: http://drdaeman.pp.ru/tmp/20090703/test.html
Изображения представляют собой прототипы, отредактированные GIMP, и не совсем то, что отображает этот код.
Добавить: Спасибо вам всем, особенно Meep3D, Nosredna и Lachlan!Однако у меня все еще есть проблема — в моем случае индикатор выполнения не должен иметь фиксированной ширины и занимать все доступное по горизонтали пространство (width: auto; или width: 100% являются приемлемыми).Но без width: 400px кодекс правила Лахлана нарушен.И я все еще хотел бы избежать использования JavaScript, если это возможно.
Решение
Согласно предложению Meep3D, сделайте 2 копии текста.
Заверните каждый в div той же ширины, что и контейнер."Верхний" div оборачивается другим div, который обрезается в нужном проценте.
Обновить:убраны фиксированные значения ширины.
Размер "верхнего" div равен обратному проценту от его оболочки.
<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>
Другие советы
Как насчет того, чтобы поместить вторую копию текста индикатора выполнения внутрь div и установить для переполнения div значение hidden, чтобы оно отображалось вместе с ним?
--
Обновить:Я также не эксперт по javascript, но я уверен, что вы можете узнать ширину объекта, а затем установить смещение на основе этого, если ширина является гибкой, как вы говорите.
Ты мог бы:
- Найдите серый цвет, который подходит
- Используйте JavaScript для динамического изменения цвета между белым и черным, в зависимости от того, где он находится
- Сделайте средний цвет фонового градиента ближе к белому и всегда используйте темный текст
- Поставьте прогресс вне игры коробка:
[######### ] 50 %
Вы могли бы использовать текстовую тень для вашего текста "в процентах".Единственным недостатком этого является то, что это будет работать только в последних версиях браузеров.Его поддерживают только Firefox 3.5, Safari (все версии) и Chrome 2+.
Вот демонстрация использования text-shadow таким образом, чтобы сделать ваш прогресс читаемым.
http://www.w3.org/Style/Examples/007/text-shadow#white
Если вы готовы использовать больше JavaScript, вы могли бы попробовать этот плагин jQuery:
http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/
В статье говорится, что это работает только в IE, однако это работает в Chrome 3 (который я использую), Firefox 3.5, Internet Explorer и Safari.Это может работать в старых браузерах, но я его не тестировал.
У Meep3D есть правильный ответ.Две версии коробки.Раскройте n% от верхнего.
Дополнительные опции:
- Поместите полупрозрачный прямоугольник под номером, который либо затемняет область для белого номера, либо осветляет область для черного номера.
- Используйте красный и белый цвета в качестве фона и черный номер.(Проблема здесь в красном цвете связан с ошибкой, поэтому вы можете поиграть с другими комбинациями из трех все цвета отличаются высокой контрастностью друг против друга.)
