Динамически менять цвет на более легкий или более темный процент CSS (Javascript)

У нас есть большое приложение на сайте, и у нас есть несколько ссылок, которые, скажем, голубого цвета, как синие ссылки на этом сайте. Теперь я хочу сделать некоторые другие ссылки, но с более светлым цветом. Очевидно, что я просто могу просто добавить шестнадцатеричный код в файл CSS, но наш сайт позволяет пользователю выбирать, какие цвета они хотят для своего настроенного профиля / сайта (например, Twitter).

Итак, мой вопрос: можем ли мы уменьшить цвет в процентах?

Скажем, следующий код: CSS:

a { color: blue; } a.lighter { color: -50%; // obviously not correct way, but just an idea } 

ИЛИ

 a.lighter { color: blue -50%; // again not correct, but another example of setting color and then redcuing it } 

Есть ли способ уменьшить цвет в процентах?

21 Solutions collect form web for “Динамически менять цвет на более легкий или более темный процент CSS (Javascript)”

Если вы используете стек, который позволяет использовать SASS , вы можете использовать функцию lighten :

 $linkcolour: #0000FF; a { color: $linkcolour; } a.lighter { color: lighten($linkcolour, 50%); } 

Теперь вы можете сделать это с помощью CSS-фильтров. Поддержка – это кросс-браузеры, но поскольку спецификация продолжает внедряться и очищаться, это будет очень удобно.

 .button { color: #ff0000; } /* note: 100% is baseline so 85% is slightly darker, 20% would be significantly darker */ .button:hover { filter: brightness(85%); } 
  

Существует «непрозрачность», которая заставит фон залить:

 opacity: 0.5; 

но я не уверен, что это то, что вы имеете в виду. Определить «уменьшить цвет»: сделать прозрачным? Или добавить белый?

Цвета HSL дают ответ, значение цвета HSL указано с помощью: hsl (оттенок [0,255], насыщенность%, легкость%).

HSL поддерживается в IE9 +, Firefox, Chrome, Safari и в Opera 10+

 a { color:hsl(240,65%,50%); } a.lighter { color:hsl(240,65%,75%); } 

В LESS используются следующие переменные:

 @primary-color: #999; @primary-color-lighter: lighten(@primary-color, 20%); 

Это займет 1-ю переменную и уменьшит ее на 20% (или любой другой процент). В этом примере вы получите более светлый цвет: #ccc

Если вам нужен более темный цвет, вы можете использовать черный rgba с низкой непрозрачностью:

 rgba(0,0,0,0.3) 

Для более легкого использования белый:

 rgba(255,255,255,0.3). 

Насколько я знаю, вы не можете сделать это в CSS.

Но я думаю, что небольшая логика на стороне сервера может легко сделать то, что вы предлагаете. Таблицы стилей CSS обычно представляют собой статические активы, но нет причин, по которым они не могут быть динамически генерированы серверным кодом. Ваш сценарий на стороне сервера:

  1. Проверьте параметр URL, чтобы определить пользователя и, следовательно, выбранный пользователем цвет. Используйте параметр URL, а не переменную сеанса, чтобы вы могли кэшировать CSS.
  2. Разделите цвет на его красный, зеленый и синий компоненты
  3. Увеличьте каждый из трех компонентов на заданную величину. Поэкспериментируйте с этим, чтобы получить результаты, которые вам нужны.
  4. Создание CSS, включающего новый цвет

Ссылки на эту страницу генерации CSS выглядят примерно так:

  

Если вы не используете расширение .css, обязательно установите MIME-тип правильно, чтобы браузер знал, что он интерпретирует файл как CSS.

(Обратите внимание, что для того, чтобы сделать цвета светлее, вы должны поднять каждый из значений RGB)

если вы решите использовать http://compass-style.org/ , основанную на sss фреймворк, он предоставляет очень полезные функции darken() и lighten() sass для динамического генерации css. это очень чисто:

 @import compass/utilities $link_color: #bb8f8f a color: $link_color a:visited color: $link_color a:hover color: darken($link_color,10) 

генерирует

 a { color: #bb8f8f; } a:visited { color: #bb8f8f; } a:hover { color: #a86f6f; } 

Вы можете использовать небольшой javascript для вычисления более темного и светлого цвета с помощью rgb ().

Fiddle : Не очень приятно, но это просто для иллюстрации.

По существу, он устанавливает цвет и выбирает 20 цветов с одинаковой суммой (по сравнению друг с другом) rgb всего на 10 друг от друга.

 for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) { var r = 91; var g = 192; var b = 222; $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+ (i*10)) ); }; 

Один простой ответ – использовать прозрачный белый PNG на 50% по цвету:

 div { background-color:red; } div:hover { background-image:url('lighten.png'); } 

Где lighten.png является PNG белого заполнения с прозрачностью 50%.

Вы можете использовать RGBa (‘a’, являющийся альфа-прозрачностью), но он пока не поддерживается широко. Это будет , однако, чтобы вы могли использовать его сейчас и добавить резервную копию:

 a:link { color: rgb(0,0,255); } a:link.lighter { color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */ } a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */ color: rgba(0,0,255,0.5); /* last value is transparency */ } 

Не прямо, нет. Но вы можете использовать сайт, такой как colorschemedesigner.com , который даст вам базовый цвет, а затем даст вам шестнадцатеричный и rgb-коды для разных диапазонов базового цвета.

Когда я нахожу свои цветовые схемы для своего сайта, я помещаю шестые коды для цветов и назову их в разделе комментариев в верхней части моей таблицы стилей.

Некоторые другие генераторы цветовой схемы include:

Пытаться:

 a { color: hsl(240, 100%, 50%); } a:hover { color: hsl(240, 100%, 70%); } 

Я знаю, что поздно, но вы можете использовать обертку для своих кнопок и изменить уровень прозрачности функции rgba, как сказано в других ответах, но без явного примера.

Вот ручка:

https://codepen.io/aronkof/pen/WzGmjR

 #wrapper { width: 50vw; height: 50vh; background-color: #AAA; margin: 20px auto; border-radius: 5px; display: grid; place-items: center; } .btn-wrap { background-color: #000; display: inline-block; } button { transition: all 0.6s linear; background-color: rgba(0, 255, 0, 1); border: none; outline: none; color: #fff; padding: 50px; font-weight: 700; font-size: 2em; } button:hover { background-color: rgba(0, 255, 0, .5); } 
 

Смотрите мой комментарий на ответ Ктфорда.

Я думаю, что простой способ облегчить цвет будет состоять в том, чтобы взять каждый из компонентов RGB, добавить к 0xff и разделить на 2. Если это не дает точных результатов, вы хотите, возьмите 0xff минус текущее значение, умноженное на некоторую константу а затем добавьте обратно к текущему значению. Например, если вы хотите сдвинуть 1/3 пути на белый, возьмите (0xff – current) / 3 + current.

Вам нужно будет сыграть с ним, чтобы узнать, какие результаты у вас есть. Я был бы обеспокоен тем, что с помощью этой простой формулы фактор, достаточно большой, чтобы заставить темные цвета угасать, может привести к тому, что светлые цвета станут совершенно белыми, а фактор, достаточно маленький, чтобы сделать светлые цвета лишь слегка облегченными, может сделать темные цвета недостаточно светлыми.

Тем не менее, я думаю, что переход на часть расстояния до белого более перспективен, чем фиксированное количество шагов.

Вы можете использовать библиотеку JavaScript, такую ​​как JXtension, которая дает пользователю возможность сделать цвет светлее или темнее. Если вы хотите найти документацию для этой новой библиотеки, нажмите здесь . Вы также можете использовать JXtension для объединения одного цвета с другим.

Похоже, что jPaq ( http://jpaq.org/ ) является заменой JXtension. Преимущество использования jPaq заключается в том, что вы можете загружать только то, что вам нужно, а не полную библиотеку JavaScript. Вот ссылка на страницу загрузки только для classа Color: http://jpaq.org/download/1.0.0.1008 .

Я нашел class PHP, который позволил мне сделать эту серверную сторону. Я просто выводил встроенный стиль цвета CSS для того, что мне нужно, чтобы оно было светлее / темнее. Прекрасно работает.

http://www.barelyfitz.com/projects/csscolor/

(обратите внимание, что class использует PEAR для металирования ошибок, но я не хотел включать PEAR только для изменения цветов, поэтому я просто удалил все ссылки PEAR)

Я превратил его в статический class со статическими методами, поэтому я могу сразу вызвать функции «lighten» и «darken», не создавая новый объект.

Использование образца:

 $original_color = 'E58D8D'; $lighter_color = Css::lighten($original_color, .7); $darker_color = Css::darken($original_color, .7); 

Я написал плагин для jquery, который имел эту же проблему. Я принимаю цвет как свойство или заданный цвет свойства css, который они хотят, и запускает его через некоторые вычисления. Hex to RGB, затем умножьте смещенный процент, затем верните новое значение. Дайте мне знать, если вы хотите пример.

Объединяя все это вместе, табличное решение сделано исключительно с DIV и CSS, попробуйте это;) Браузер должен поддерживать цвета RGBA, хотя ….

     
First Line
FL C2
FL C3>
Second Line
SL C2
SL C3>
Third Line
TL C2
TL C3>
Forth Line
FL C2
FL C3>
Fifth Line
FL C2
FL C3>
Sixth Line
SL C2
SL C3>
Seventh Line
SL C2
SL C3>
Eight Line
EL C2
EL C3>
Nineth Line
NL C2
NL C3>
Tenth Line
TL C2
TL C3>

Для css с именем color ‘blue’, есть ‘lightblue’

Для «зеленого» есть «светло-зеленый»,

Для «серого» есть «lightgrey»,

Для «желтого» есть «lightyellow»

Попробуйте просмотреть этот список цветов с именем css, чтобы узнать больше: http://www.w3schools.com/CSS/css_colornames.asp

  • CSS margin-top влияет на маржу родителя
  • Разрешенные символы для идентификаторов CSS
  • CSS - почему не работает процентный рост?
  • Что делает правило CSS «clear: both» do?
  • Можно ли центрировать текст в поле выбора?
  • Как выровнять левую последнюю строку / строку в нескольких линиях flexbox
  • iPhone 5 CSS-медиа-запрос
  • Как включить просмотр / частичный стиль в AngularJS
  • Как сделать элемент встроенного блока заполнить оставшуюся часть строки?
  • Каковы допустимые значения свойства `display` для гибкого элемента? (макет детей из гибкого предмета не имеет значения)
  • Как получить код цвета фона элемента?
  • Interesting Posts

    Как восстановить отсутствующую адресную строку проводника Windows?

    Массовое удаление файлов в Windows

    UIImagePickerController нарушает внешний вид строки состояния

    Эффективный декартовы алгоритм продукта

    Добавление локальных файлов .aar в сборку Gradle с использованием «flatDirs» не работает

    Automount SMB с использованием пароля keychain

    Существуют ли расширенные параметры поиска истории Google Chrome?

    В чем разница между включением и расширением диаграммы использования?

    Могу ли я вернуть JSON из веб-службы .asmx, если ContentType не является JSON?

    Как создать контекст рендеринга OpenGL с прозрачным фоном?

    Как «предупреждение о безопасности Windows» вы хотите запустить этот файл .. »работают?

    Зачем использовать !! при преобразовании int в bool?

    Как обрабатывать всплывающее окно аутентификации с помощью Selenium WebDriver с помощью Java

    Fancybox застрял в загрузке iframe в IE

    Как запустить тестовые методы в определенном порядке в JUnit4?

    Давайте будем гением компьютера.