Создавать фильтр grayscala для изображения с CSS

Как я могу применять фильтр grayscala к изображению с CSS?

4
задан 23.01.2016, 00:43
2 ответа

Синтаксис

.imagen {
  filter: <filter-function> [<filter-function>]* | none
}

Пример применяя фильтр к изображению serГ - в:

HTML

<img class="blur" src="imagen.jpg" />

CSS

.blur {
  -webkit-filter: grayscale(20%)
  filter: grayscale(20%);
}
0
ответ дан 24.11.2019, 14:58

Первоначальный ответ StackOverflow в inglГ©s
Webkit обладает опорой для фильтров CSS Compatiblidad cross-browser!

img {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

/* Disable grayscale on hover */
img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}
<img src="http://lorempixel.com/630/170/">
1
ответ дан 24.11.2019, 14:58