Как затемнить изображение css

Затемнение изображений простым и быстрым способом на чистом CSS

Этот способ можно считать несколько устаревшим из-за наличия режимов наложения фона, хотя режимы наложения не поддерживаются во всех версиях браузеров Internet Explorer и Edge, многих мобильных браузерах и только частично поддерживается в браузерах Safari, так что этот способ можно использовать как обходной путь.

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

Размытие фона можно использовать для усиления контраста между текстом и изображением, находящимся за ним. Конечно, можно уменьшить прозрачность изображения, обработав его в программе PhotoShop, но для этого обычно нужно многократное повторение подбора цветов в программе-редакторе изображений и проверки получившегося результата в браузере, в то время как изменение значений в коде CSS требует намного меньше времени и усилий.

Фоновое изображение до затемнения

В записи свойства множественных фоновых изображений первым идет самый верхний фон, так что составная фотография, выполненная Thomas Shahan, располагается последней:

h1  font-family: Calluna Sans, Arial, sans-serif; color: #fff; margin-top: 0; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('bugs.jpg'); font-size: 5rem; padding: 2rem; text-align: center; background-repeat: no-repeat; background-size: cover; word-spacing: 5rem; >

Применим этот код CSS к коду HTML ниже:

 Бешеный жук 

И получим результат, показанный далее. Изменение затемнения фонового изображения достигается просто увеличением последнего значения (alpha), которое задает прозрачность, в записи цвета фона в формате rgba.

Автор урока Dudley Storey

• Создание анимированных раздвигающихся изображений, закрывающих фон
• Эффектов изысканных паспарту для изображения с использованием CSS
• Анимированные внутренние подписи на фоне изображений с применением фильтров

Как затемнить изображение css

Здесь будет очередь обработки изображений. Добавляйте новые фильтры (снизу)

Сохранить пресет Поделиться пресетом

Затемнить фото онлайн

Если вам нужно затемнить фото онлайн вы на нужной странице.

Затемнить фото легко и просто, для этого:

• Загрузите фото через форму ниже.
• Нажмите кнопку «Скачать» чтобы сгенерировать и скачать обработанные изображения.

Доступная пакетная обработка! Затемняйте ваши фото массово!

• Изменить яркость фото онлайн
• Изменить насыщенность фото онлайн
• Конвертер изображений в формат JPG (JPEG)
• Постеризация фото онлайн
• Эффекты для фото онлайн

Автоматически настраивает яркость и контраст изображения

‘ data-type=’autoimprove’>

Автоулучшение
Изменяет цвет фона изображения или делает его прозрачным

‘ data-type=’changebg’>

Изменить фон
Наложить картинку

‘ data-type=’coverimg’>

Наложить кар-ку

Зеркалирует изображение по горизонтали или вертикали

‘ data-type=’mirror’>

Зеркалирование

Поворачивает изображение на заданный угол

‘ data-type=’rotate’>

Искажает изображение путем скручивания

‘ data-type=’swirl’>

Скручивание

Добавляет текст на изображение

‘ data-type=’text’>

Добавляет рамку на изображение

‘ data-type=’frame’>

Делает изображение черно-белым

‘ data-type=’grayscale’>

Градации серого

Делает негатив изображения

‘ data-type=’negate’>

Делает изображение рельефным

‘ data-type=’emboss’>

Добавляет водную рябь на изображение

‘ data-type=’wave’>

Добавляет эффект слепка на изображение

‘ data-type=’shade’>

Изменяет яркость изображения

‘ data-type=’brightness’>

Изменяет насыщенность изображения

‘ data-type=’saturation’>

Насыщенность

Изменяет контраст изображения

‘ data-type=’contrast’>

Делает изображение размытым. Поддерживается несколько видов размытия.

‘ data-type=’blur’>

Добавляет эффект пикселизации

‘ data-type=’pixelization’>

Пикселизация

Добавляет градиент на изображение

‘ data-type=’gradient’>

Усиливает резкость изображения

‘ data-type=’sharp’>

Добавляет шум на изображение

‘ data-type=’noise’>

Добавить шум

Добавляет эффект живописи на изображение

‘ data-type=’paint’>

Изображение станет выглядеть так, будто нарисовано углем

‘ data-type=’charcoal’>

Рисунок углем
Изменяет размеры изображения

‘ data-type=’sizes’>

Обрезает изображение по заданным размерам

‘ data-type=’crop’>

Ограничивает кол-во цветов в изображении

‘ data-type=’posterize’>

Постеризация

Создает демотиватор из изображения

‘ data-type=’demotivator’>

Демотиватор

‘ data-type=’vignette’>

Виньетирование

Сдвигает изображение на заданное значение

‘ data-type=’roll’>

‘ data-type=’snow’>

Изображение станет выглядеть так, будто нарисовано карандашом

‘ data-type=’sketch’>

Удаляет EXIF метаданные

‘ data-type=’removeexif’>

Удалить EXIF
Устанавливает тип файла на выходе и уровень сжатия

‘ data-type=’file’>

CSS и множественный фон

CSS-свойство background — это одно из самых часто используемых свойств. Но сообщество веб-разработчиков пока не слишком хорошо осведомлено о возможностях, которые даёт использование множественного фона. Здесь я собираюсь серьёзно поговорить о том, что может дать применение множественного фона, и о том, как использовать стандартные механизмы CSS на полную мощность.

В этом материале я подробно расскажу о свойстве background-image , приведу наглядные примеры совместного использования нескольких фоновых изображений элемента, рассмотрю сильные стороны такого подхода. Здесь будет много иллюстраций.

Если вы не знакомы с CSS-свойством background — хорошо будет, если вы, перед чтением материала, заглянете на эту страницу документации MDN, посвящённую данному свойству.

Введение

CSS-свойство background — это сокращённое свойство, которое позволяет настраивать следующие обычные свойства элементов:

• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• background-attachment

Рассмотрим следующий пример:

.element < background: url(cool.jpg) top left/50px 50px no-repeat; >

Начальная позиция фонового изображения находится в верхнем левом углу элемента. Размер изображения составляет 50px * 50px . При настройке свойства background важно помнить о порядке следования свойств, задающих позицию и размер фонового изображения.

Путь к изображению, его позиция и его размер

На предыдущем рисунке за значениями, относящимися к настройке свойства background-position , идут значения свойства background-size . Если разместить эти значения в другом порядке, мы получим неправильно оформленный CSS-код. Например — такой:

.element < /* Осторожно: неправильный CSS */ background: url(cool.jpg) 50px 50px/top left no-repeat; >

Позиция фонового изображения

Для настройки области расположения фона, исходной позиции фонового изображения, используется свойство background-origin . Мне нравится та гибкость, которую даёт свойство background-position . Оно позволяет позиционировать фон элементов разными способами:

• Ключевые слова ( top , right , bottom , left , center ).
• Процентные значения. Например: 50% .
• Значения, задающие некие расстояния. Например: 20px 2.5rem .
• Значения, представляющие собой отступы от краёв элемента. Например: top 20px left 10px .

Система координат

Начало системы координат, используемой при позиционировании фоновых изображений, находится в левом верхнем углу элемента. Начальным значением свойства background-position является 0% 0% .

Стоит отметить то, что значение top left — это то же самое, что и значение left top . Браузер достаточно интеллектуален для того чтобы определить то, какая часть этого значения относится к оси X, а какая — к оси Y.

Конструкции вида top left и left top равнозначны

.element < background: url(cool.jpg) top left/50px 50px no-repeat; /* Это - то же самое, что и следующее */ background: url(cool.jpg) left top/50px 50px no-repeat; >

Размер фонового изображения

Имя свойства, задающего размер фонового изображения, background-size , однозначно указывает на роль этого свойства. Размер фонового изображения — это его ширина и высота. При настройке этого свойства нужно учитывать то, что первое значение представляет ширину, а второе — высоту.

Сначала идёт ширина, а потом — высота

Если ширина и высота фонового изображения являются одинаковыми, это значит, что у нас нет необходимости указывать два значения для background-size . В такой ситуации достаточно указать одно значение.

Тут, кстати, нелишним будет упомянуть о том, что в спецификации CSS по этому поводу сказано следующее: «Если указано лишь одно значение, то предполагается, что второе значение — это auto». Но этот механизм в браузерах не реализован, хотя в будущем ситуация может измениться. Благодарю Илью Стрельцына за то, что привлёк моё внимание к этой детали.

Одно значение задаёт и ширину, и высоту

Теперь, когда мы поговорили об основах использования свойства background , давайте поговорим о том, как работать с несколькими фонами.

Множественный фон

В свойстве background может быть описан один слой фона, до сих пор мы видели именно такие описания, или — несколько слоёв, свойства которых разделены запятой. Если размеры нескольких фоновых изображений одинаковы, одно из них полностью перекроет другие.

.element < background: url(cool.jpg) top left/50px 50px no-repeat, url(cool.jpg) center/50px 50px no-repeat; >

Использование нескольких фоновых изображений

На вышеприведённом рисунке у элемента есть два слоя фоновых изображений. Каждое из этих изображений позиционировано по-своему. Это — простейший пример использования множественного фона. А теперь давайте рассмотрим более продвинутый пример.

Порядок наложения фоновых изображений друг на друга

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

.hero < min-height: 350px; background: url('table.jpg') center/cover no-repeat, url('konafa.svg') center/50px no-repeat; >

Здесь у нас имеется изображение стола ( table.jpg ) и изображение тарелки ( konafa.svg ). Как вы думаете, какое из этих фоновых изображений будет выведено первым? Изображение стола или изображение тарелки?

Элемент с двумя фоновыми изображениями

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

.hero < background: url('konafa.svg') center/50px no-repeat, url('table.jpg') center/cover no-repeat; >

Первый фон накладывается на второй

Как видите, фон, заданный первым, находится выше фона, заданного вторым.

Сплошные цвета

Предположим, нам, используя CSS-инструменты настройки фона элемента, нужно сформировать одноцветный фон. Как это сделать? Это, благодаря CSS-градиентам, совсем несложная задача. Дело в том, что если воспользоваться функцией linear-gradient с одинаковыми стоп-цветами, это приведёт к появлению сплошного цвета.

.hero

Фон, созданный с помощью linear-gradient и одинаковых стоп-цветов

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

Сценарии использования и практические примеры

▍Затемнение фонового изображения

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

.hero < background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("landscape.jpg") center/cover; >

Затемнённое фоновое изображение

Ещё интереснее то, что тот же метод можно использовать для тонирования фонового изображения элементов.

.hero < background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25), url("landscape.jpg") center/cover; >

Тонированный фон

▍Рисование средствами CSS

Возможности использования CSS-градиентов для рисования поистине безграничны. В частности, речь идёт о градиентах, описываемых с помощью функций linear-gradient , radial-gradient и других. В этом простом примере мы разберёмся с тем, как, используя градиенты, нарисовать ноутбук.

Изображение ноутбука

Давайте разберём это изображение и подумаем о том, какие градиенты нам понадобятся.

Пластиковая рамка дисплея, LCD-дисплей, отражение, скруглённые края корпуса, корпус

Обратите внимание на то, что когда ноутбук «разобран», гораздо легче разобраться в том, какие градиенты нужны для того чтобы его нарисовать с использованием техники применения нескольких фоновых изображений. Возможно, вы заметили то, что я использовал пару окружностей, играющих роль скруглённых углов корпуса ноутбука. Дело в том, что стандартного способа создания градиентов со скруглёнными углами не существует.

Теперь займёмся рисованием. Для начала определим каждый из градиентов в виде CSS-переменной и укажем размер соответствующих элементов. Мне нравится использовать CSS-переменные из-за того, что это может уменьшить сложность кода, делает код чище и облегчает его восприятие. После того, как градиенты описаны, можно переходить к их позиционированию.

:root

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

Схематичное изображение ноутбука

Реализация отражения света от рамки дисплея ноутбука

Как уже было сказано, слой фона, который должен располагаться над всеми остальными слоями, должен быть определён первым. В нашем случае первым градиентом будет тот, который имитирует отражение света от рамки дисплея ноутбука.

Отражение света от рамки дисплея ноутбука

LCD-дисплей

Дисплей ноутбука выровнен по центру оси X, а по оси Y он расположен со сдвигом в 6 пикселей от начала координат.

Дисплей ноутбука

Рамка дисплея

Рамка находится ниже дисплея, она центрирована по оси X, по оси Y она расположена со смещением в 0px от начала координат.

Рамка дисплея

Корпус ноутбука

А это — самый интересный элемент. Для начала, надо учесть то, что элемент, представляющий корпус ноутбука, является прямоугольником, и то, что корпус имеет скруглённые края. Это достигается благодаря использованию пары окружностей.

Корпус ноутбука

Готовый рисунок

:root < --case: linear-gradient(#222, #222); --case-size: 152px 103px; --case-pos: center 0; --display: linear-gradient(#fff, #fff); --display-size: 137px 87px; --display-pos: center 6px; --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0)); --reflection-size: 78px 78px; --reflection-pos: top right; --body: linear-gradient(#888, #888); --body-size: 182px 9px; --body-pos: center bottom; --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%); --circle-size: 10px 10px; --circle-left-pos: left bottom; --circle-right-pos: right bottom; >.cool < width: 190px; height: 112px; background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body); background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size); background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos); background-repeat: no-repeat; /*outline: solid 1px;*/ >

Вот CodePen-проект, с которым вы можете поэкспериментировать.

▍Смешивание нескольких фонов

Возможность использования различных режимов смешивания фонов, накладываемых друг на друга, открывает широкий простор для достижения различных эффектов. Простейший способ использования этого приёма заключается в обесцвечивании изображений. Представим, что в CSS имеется цветное фоновое изображение, которое нужно обесцветить, сделать чёрно-белым.

Цветное изображение и вспомогательный слой чёрного цвета

Обратите внимание на то, что в следующем фрагменте CSS-кода используется свойство background-blend-mode: color . Именно оно и позволяет достичь нужного эффекта

.hero < background: linear-gradient(#000, #000), url("landscape.jpg") center/cover; background-blend-mode: color; >

Обесцвеченное изображение

Пользуетесь ли вы множественными фонами в CSS?

Как наложить тень на картинку?

Есть картинка. Нужно наложить на нее как-бы прозрачную, черного цвета пленку, чтобы картинка была тусклой.
Я написал так:

Но почему-то не работает. Что я пишу не так?
Отслеживать
user262779
задан 27 фев 2019 в 15:01
319 1 1 серебряный знак 11 11 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

А Вы точно уверены, что Вам нужна тень? Или всё-таки равномерный полупрозрачный слой поверх всей картинки? Если слой, то с помощью box-shadow Вы такого эффекта не добьётесь — придётся использовать дополнительный элемент.

К сожалению, у img нет своих псевдоэлементов, поэтому как вариант — обернуть картинку в блок и уже с помощью его :after наложить плёнку на изображение:

.img-wrap < float: left; position: relative; >img < max-width: 100%; display: block; margin: 0; >.img-wrap:after

Отслеживать
ответ дан 27 фев 2019 в 18:39
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков

• html
• css
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.