tag - image in css




Серое изображение с CSS? (6)

Каков наилучший способ (если есть) сделать изображение «серым» с помощью CSS (т. Е. Без загрузки отдельной, серой версии изображения)?

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


Ваше имя:

<a href="#"><img src="img.jpg" /></a>

Css Grey:

img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Ungray:

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

Я нашел его по адресу: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Изменить: IE10 + не поддерживает фильтры DX, как это делали IE9 и ранее, и не поддерживает префиксную версию фильтра оттенков серого. Вы можете исправить это, воспользуйтесь одним из двух решений ниже:

  1. Установите IE10 + для рендеринга с использованием режима стандартов IE9 с использованием следующего мета-элемента в голове: <meta http-equiv="X-UA-Compatible" content="IE=9">
  2. Используйте оверлей SVG в IE10 для выполнения браузера с подсветкой для серого. 10 - Как применить фильтр оттенков серого?

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

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>

Если вы не против использовать немного JavaScript, fadeTo() jQuery fadeTo() работает в каждом браузере, который я пробовал.

jQuery(selector).fadeTo(speed, opacity);

Используйте свойство фильтра CSS3:

img {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

Поддержка браузера немного плоха, но это 100% CSS. Хорошую статью о свойстве фильтра CSS3 вы можете найти здесь: http://blog.nmsdvid.com/css-filter-property/


Учитывая фильтр: выражение является расширением Microsoft для CSS, поэтому оно будет работать только в Internet Explorer. Если вы хотите опустить его, я бы рекомендовал вам установить непрозрачность на 50%, используя немного javascript.

http://lyxus.net/mv будет хорошим началом, потому что в нем обсуждается сценарий непрозрачности, который работает с браузерами Firefox, Safari, KHTML, Internet Explorer и CSS3.

Возможно, вы также захотите дать ему серая граница.


Должен ли он быть серым? Вы можете просто установить непрозрачность изображения ниже (чтобы уныло это). Кроме того, вы можете создать оверлей <div> и установить, что это серый (изменить альфа, чтобы получить эффект).

  • HTML:

    <div id="wrapper">
        <img id="myImage" src="something.jpg" />
    </div>
    
  • CSS:

    #myImage {
        opacity: 0.4;
        filter: alpha(opacity=40); /* msie */
    }
    
    /* or */
    
    #wrapper {
        opacity: 0.4;
        filter: alpha(opacity=40); /* msie */
        background-color: #000;
    }
    




css