Делаем цветное изображение черно-белым с помощью CSS Filters
В данном примере сделаем изображение с классом filter черно-белым по умолчанию, а при наведении на него, оно будет плавно становиться цветным.
.filter < -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); -webkit-transition:1s; -moz-transition:1s; -o-transition:1s; transition:1s; >.filter:hover
Простой пример, как цветное изображение сделать белым при наведении на него, в моем случае, нужно было темно-зеленое лого сделать белым, при наведении:
.site-logo a img < transition: .4s; >.site-logo a:hover img
Больше информации здесь:
Вообще, для для Лайков существует большое количество плагинов, например отличный плагин Pluso (он больше для…
Для того чтобы добавить виджет комментариев от Facebook необходимо проделать чуть больше работы чем с…
Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой…
В общем, переносили сайт, вроде все сделали по правилам, осталось подождать обновления NS, но они…
Как сделать картинку чёрно-белой?
Обычно изображение для сайта готовят в графическом редакторе и в нём уже задают яркость, контрастность и другие параметры картинки. С помощью CSS этот процесс можно упростить и менять цветность «на лету», к примеру, при наведении указателя на изображение. Для этого используем свойство filter и функцию grayscale(1) для создания чёрно-белой картинки и grayscale(0) для цветной. Чтобы всё это менялось плавно и красиво, добавляем свойство transition с указанием времени перехода (пример 1).
Пример 1. Чёрно-белая картинка
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цветности картинки при наведении
В браузере Internet Explorer свойство filter не работает.
grayscale()
Функция grayscale() превращает изображение в чёрно-белое.
Синтаксис
filter: grayscale();Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
Значение 100% или 1 превращает изображение в чёрно-белое. Значение 0 оставляет изображение исходно цветным. Значения меньше 100% (или меньше 1) линейно меняют цветность картинки.
Отрицательное значение не допускается. Пустое значение воспринимается как 0.
Песочница
Пример
Результат данного примера показан на рис. 1. При наведении курсора мыши на фотографию, она плавно из чёрно-белой превращается в цветную.
Рис. 1. Чёрно-белые изображения
Примечание
Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter .
Спецификация
| Спецификация | Статус |
|---|---|
| Filter Effects Module Level 1 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 13 | 18 | 53 | 15 | 40 | 6 | 9.1 | 35 |
| 4.4 | 35 | 37 | 6.1 | 9.3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
Рецепты
- Как размыть изображение?
- Как размыть текст?
- Как размыть фоновую картинку?
- Как сделать картинку чёрно-белой?
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
Как при помощи CSS сделать картинку черно-белой?
Здравствуйте. Как при помощи CSS сделать картинку черно-белой?
UPD1:
Инструменты серверного программирования недоступны. Только клиентский CSS.
Отслеживать
Anton Mukhin
задан 24 дек 2011 в 13:27
Anton Mukhin Anton Mukhin
5,515 9 9 золотых знаков 51 51 серебряный знак 92 92 бронзовых знака
С помощью одного лишь CSS врятли тут еще с JS надо повозится. Вот небольшой пример — тыц
24 дек 2011 в 13:32
Это не делает картинку черно-белой) Там их 2 на каждую.
24 дек 2011 в 13:44
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
filter: grayscale(100%); Отслеживать
ответ дан 8 июн 2015 в 4:57
Григорий Смирнов Григорий Смирнов
311 2 2 серебряных знака 5 5 бронзовых знаков
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url(grayscale.svg); /* Firefox 4+ */ filter: gray; /* IE 6-9 */ Отслеживать
ответ дан 1 сен 2015 в 12:26
Ilya Karev Ilya Karev
21 1 1 бронзовый знак
Откуда такой набор префиксов? Не вижу, чтобы они вообще существовали, кроме webkit.
1 сен 2015 в 12:37
Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение?
1 сен 2015 в 13:05
Мб объяснить заказчику, что браузер — не фотошоп?)
Отслеживать
ответ дан 24 дек 2011 в 14:17
14.3k 1 1 золотой знак 21 21 серебряный знак 35 35 бронзовых знаков
- css3
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.