Цвет текста индикатора выполнения CSS для контраста заполненные и пустые фоны?
Изменяемый для маркировки определенного атрибута как модифицируемый из const методы. Это - его единственная цель. Думайте тщательно перед использованием его, потому что Ваш код, вероятно, будет более чистым и более читаемым, если Вы будете изменять дизайн, а не использовать mutable.
http://www.highprogrammer.com/alan/rants/mutable.html
Поэтому, если вышеупомянутое безумие не то, для чего изменяемый, для чего это? Вот тонкий случай: изменяемый для случая, где объект является логически постоянным, но в практике должен измениться. Эти случаи немногочисленны, но они существуют.
Примеры, которые дает автор, включают кэширование и временные переменные отладки.
5 ответов
Согласно предложению Meep3D, возьмите 2 копии текста.
Оберните каждую в блок 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 / Примеры / 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% верхнего.
Дополнительные параметры:
- Поместите полупрозрачный ящик под число, которое либо затемняет область для белого числа или осветляет область для черного числа.
- Используйте красный и белый в качестве фона и черный номер. (Проблема здесь красная связан с ошибкой, поэтому вы можете играть с другими комбинациями из трех все цвета с высокой контрастностью друг против друга.)