Как затемнить картинку в css
Как мне затемнить фоновое изображение при наведении без создания нового темного изображения?
ОТВЕТЫ
Ответ 1
Как насчет этого, используя оверлей?
Ответ 2
Похоже, но опять же немного по-другому.
Сделайте изображение на 100% непрозрачным, чтобы оно было четким. А затем на img hover уменьшите его до непрозрачности, которую вы хотите. В этом примере я также добавил ослабление для хорошего перехода.
Это поможет, надеюсь, это поможет.
Спасибо Роберт Байерс за ваше выступление
Ответ 3
Если вы хотите затемнить изображение, используйте элемент наложения с rgba и opacity свойствами, которые затемнят ваше изображение.
Примечание. Я также использую переходы CSS3 для плавного темного эффекта
Если кто-нибудь сохранит дополнительный элемент в DOM, вы можете использовать псевдоним :before или :after ..
Использование некоторого содержимого поверх затемненного наложения изображения
Здесь я использую методы CSS-позиционирования с z-index для наложения содержимого поверх затемненного элемента div . Демо 3
Ответ 4
Вы можете использовать opacity:
Ответ 5
Ответ 6
Ответ 7
Попробуйте выполнить следующий код:
Ответ 8
Вы получите темнее
Ответ 9
Самый простой способ сделать это, не добавляя дополнительный элемент оверлея или используя два изображения, — это использовать: до или: после селектора.
Конечно, это не будет работать в старых браузерах; просто скажите, что он изящно деградирует!
Ответ 10
Если вам нужно использовать текущее изображение и получить более темное изображение, вам нужно создать новый. Кроме того, вы можете просто уменьшить непрозрачность класса .image и в .image: hover вы можете поместить более высокое значение для непрозрачности. Но тогда изображение без зависания выглядело бы бледным.
Лучшим способом было бы создать два изображения и добавить следующее:
Ответ 11
Я бы добавил div вокруг изображения и сделал изменение изображения в непрозрачности при наведении и добавил тень вставки в div на hover.
Как затемнить фоновое изображение CSS?
Я вытягиваю свои волосы из-за этого. Я попытался буквально все, что нашел, и в этот момент я предполагаю, что должен просто совершить какую-то ошибку. Я пытаюсь затемнить фоновое изображение, чтобы оно не было столь насыщенным.
Это дает мне фон, который полностью покрывает страницу. Но я хочу затемнить его (без зависания или щелчка). Все, что я пробовал, НЕ достигло какого-либо потемнения (я пробовал фальшивые градиенты, материал reba и т.д.) И каким-то образом мешал и , нажимая их повсюду.
2.27. CSS3-фильтры
CSS3-фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.
Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.
Изначально фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. С поддержкой SVG браузерами появилась возможность использовать эти эффекты непосредственно в браузерах.
Браузеры обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом, применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.
Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент :hover .
Поддержка браузерами
IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-
Затемнение изображения с помощью CSS (в любой форме)
Поэтому я видел немало способов затемнить изображения с помощью CSS, в том числе с закругленными углами, но моя проблема в другом.
Допустим, у меня есть изображение в формате.png, похожее на маленькую собачку (просто продолжайте, у меня нет хороших примеров), когда я размещаю его на своей странице, я даю размеры 100 х 100.
Но я не могу просто наложить что-либо на него или подкрасить изображение целиком, так как это приведет к тому, что фон собаки также будет окрашен, что выглядит некрасиво.
Можно ли подкрасить изображение произвольной формы с помощью CSS?
(Я предполагаю, что вы понимаете мою точку зрения, и бесполезный код не нужен)
4 ответа
Вы всегда можете изменить непрозрачность изображения, учитывая сложность любых альтернатив, это может быть лучшим подходом.
Если вы заинтересованы в лучшей совместимости браузера, я предлагаю прочитать это:
Если вы достаточно полны решимости, вы можете заставить это работать еще в IE7 (кто знал!)
Примечание: как JGonzalezD указывает ниже, это только на самом деле затемняет изображение, если цвет фона, как правило, темнее, чем само изображение. Хотя этот метод все еще может быть полезен, если вы специально не хотите затемнять изображение, а вместо этого хотите по любой причине выделить его при наведении / фокусе / другом состоянии.
Похожие публикации:
- Как сделать боковое меню html css
- Как сделать внутренний отступ в css
- Как сделать галочку в css
- Как сделать жирным текст в css
Как затемнить картинку в css
Подскажите, как сделать затемнение фона? (полупрозрачным цветом)
Сейчас на многих сайтах используется такое затемнение, но я не нашел, как его сделать. Например у header есть картинка на фоне, а поверх нее текст. Но чтобы текст читался, поверх картинки накладывается полупрозрачный черный например фон. Как его сделать? Для header имеются такие свойства:
Это ответ на ваш вопрос:
Наложить полупрозрачный блок c rgba бэкграундом (где 4й параметр прозрачность) и с абсолютным позиционированием. HTML:
Добавляешь черную заливку фона и opacity: значение от 0 до 1; для этого фона . Пример: полупрозрачность opacity: 0.5;
Можно сделать с помощью псевдоэлемента. Код будет примерно такой:
например, background-color: rgba(0, 0, 0, 0.5);
Тоже понадобилось такое решение, в итоге не подходили предложения через ::after , position и z-index . В этих случаях нужно все элементы на странице поднимать на позицию выше. Через filter и opacity тоже не вариант, затемняется всё.
Решение простое.
Как сделать затемнение фона через CSS
Очень часто я стал видеть на сайтах затемнение фона. Особенно часто это делается в галереях, где по клику на изображение, оно увеличивается, а вся остальная часть затемняется. Безусловно, практически везде стоит специальный плагин JQuery, но в этой статье я расскажу, как сделать затемнение фона через CSS, не прибегая к JQuery.
Давайте напишу HTML-код:
Здесь я добавил одну таблицу, в качестве тестового контента, который будет затемнён. А также блок TB_overlay, который и является ключевым, то есть он будет затемнять. Привожу CSS-код:
Здесь я постарался прокомментировать, но обратите внимание на свойство opacity. Чем выше значение, тем более сильное затемнение. Максимальное значение 1. Фактически, данный способ затемнения фона через CSS очень прост: идёт наложение на весь контент чёрного блока с определённой прозрачностью.
На мой взгляд, данный способ затемнения очень простой и понятный, поэтому он и применяется чаще всего.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 8 ):
Добрый вечер, Михаил. Я скопировала код, но появилась только таблица, без всякого затемнения. Почему?
Попробуйте в других браузерах, если не получится, значит, как-то не так подключили стили.
Михаил, добрый день. Я новичок, и учусь писать ХТМЛ странички. Есть такой вот код, наверное он даже вашего производства:
| X |
Здесь на месте этого текста ставьте свой текст или html код.
а 
б