tag Серое изображение с CSS?




image in css (7)

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

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


Вот пример, который позволит вам установить цвет фона. Если вы не хотите использовать 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/


Вы можете использовать rgba() в css для определения цвета вместо rgb() . style='background-color: rgba(128,128,128, 0.7); : style='background-color: rgba(128,128,128, 0.7);

Дает вам тот же цвет, что и rgb(128,128,128) но с непрозрачностью 70%, поэтому материал только показывает до 30%. CSS3, но он работает в большинстве браузеров с 2008 года. Извините, я не знаю синтаксиса #rrggbb. Играйте с цифрами - вы можете вымыть белым, тень с серой, все, что вы хотите разбавить.

Итак, вы делаете прямоугольник aa в полупрозрачном сером (или любом другом цвете) и кладете его поверх своего изображения, возможно, с положением: абсолютным и z-индексом выше нуля, и вы помещаете его непосредственно перед вашим изображением и по умолчанию расположение прямоугольника будет тем же самым верхним левым углом вашего изображения. Должно сработать.


Ваше имя:

<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 - Как применить фильтр оттенков серого?

Должен ли он быть серым? Вы можете просто установить непрозрачность изображения ниже (чтобы уныло это). Кроме того, вы можете создать оверлей <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;
    }
    

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

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

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





css