Css lighten: Dynamically change color to lighter or darker by percentage CSS

Свойство CSS: режим смешивания: плюс-светлее | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Свойство CSS: режим смешивания: плюс-светлее

• Глобальное использование

  91,7% + 0% «=» 91,7%

IE

1. 6–10: не поддерживается
2. 11: не поддерживается

Edge

1. 12–99: не поддерживается
2. 100–111: поддерживается
3. 112: поддерживается

Firefox

9 0037 2–98: не поддерживается
1. 99–111: поддерживается
2. 01% — Supported»> 112: поддерживается
3. 113–114: поддерживается

Chrome

1. 4–99: не поддерживается
2. 100–111: поддерживается
3. 112: поддерживается
90 053 113–115: поддерживается

Safari

91 0–97: не поддерживается
1. 98: не поддерживается

Safari вкл. iOS

1. 3.2–9.2: не поддерживается
2. 9.3–16.3: поддерживается
3. 16.4: поддерживается
4. 16.5: поддерживается

Opera Mini

1. все: поддержка неизвестна

Браузер Android

1. 43% — Not supported»> 2.1–4.4.4: не поддерживается
2. 112: поддерживается

Opera Mobile

1. 12–12.1: не поддерживается
2. 73: не поддерживается 900 14

Chrome для Android

1. 112: поддерживается

Firefox для Android

1. 110: поддерживается

UC Browser для Android

1. 13.4: поддержка неизвестна

Samsung Internet

9013 3 4 — 18.0: не поддерживается
1. 19.0: Поддерживается
2. 20: Поддерживается

Браузер QQ

1. 13.1: Поддержка неизвестна

Браузер Baidu

1. 00% — Support unknown»> 13.18: поддержка неизвестна

браузер KaiOS

1. 2.5: поддержка неизвестна
2. 3: поддержка unknown

новый код — Понимание CSS Blend, Часть 1: Затемнение и осветление

Если вы похожи на большинство других дизайнеров, то ваш опыт работы с режимами наложения в приложениях Adobe обычно напоминает «Хммм, интересно, какой из на этот раз они сработают?»

Теперь, когда режимы наложения есть в CSS, мы хотим устранить хотя бы часть этой путаницы, чтобы мы могли создавать великолепные проекты без догадок.

Первый ключ к пониманию режимов наложения на самом деле можно получить, взглянув на параметры наложения, доступные в приложении Adobe. Например, PhotoShop CC на Mac:

Вы можете видеть, что моды тонко разделены линиями, создавая группы. Первая группа, Обычный , является режимом по умолчанию, поэтому мы можем пока его игнорировать.

Мы также можем игнорировать Dissolve , так как он не был перенесен в CSS. Вторая и третья группы дают нам некоторое представление. Это группы затемнения и осветления, и при их применении следует соблюдать некоторые основные правила:

Затемнить режимы будут всегда затемнять слой, к которому они применяются.

Lighten режимы будут осветлять только тот слой, к которому они применяются.

Мы можем это легко продемонстрировать. Учитывая изображение поверх нейтрального фона:

 <дел>

 #blend-mode-example { background: #fff; }
#blend-mode-пример img {
ширина: 100%; высота: авто;
смешанный режим смешивания: затемнить;
}