Перетворіть зображення в масштаб сірого в HTML / CSS

Чи є простий спосіб відобразити кольоровий растровий малюнок у відтінках сірого HTML/CSS?

Це не повинно бути сумісним IE (і я думаю, це не буде) - якщо він працює у FF3 та / або Sf3, це для мене досить добре.

Я знаю, що можу це зробити і з SVGі Canvas, але, здається, зараз дуже багато роботи.

Чи є справді ледачий спосіб зробити це?

Підтримка фільтрів CSS висаджена у Webkit. Таким чином, у нас зараз є рішення для крос-браузера.

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

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

<img src="http://lorempixel.com/400/200/">

Що з Internet Explorer 10?

Можна використовувати поліфіл, як сірий .

Виходячи з відповіді brillout.com , а також відповіді Романа Нурика та дещо розслабивши вимогу "без SVG", ви можете знецінити зображення у Firefox, використовуючи лише один SVG-файл та деякі CSS.

Ваш SVG-файл буде виглядати приблизно так:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

Збережіть це як resource.svg, відтепер його можна повторно використовувати для будь-якого зображення, яке ви хочете змінити на відтінки сірого.

У своєму CSS ви посилаєтесь на фільтр, використовуючи специфічну filterвластивість Firefox :

.target {
    filter: url(resources.svg#desaturate);
}

Додайте також і власні MS, якщо вам це здається, застосуйте цей клас до будь-якого зображення, яке ви хочете перетворити в масштаб сірого (працює в Firefox> 3.5, IE8) .

редагувати : Ось приємна публікація в блозі, в якій описано використання нового filterвластивості CSS3 у відповіді SalmanPK у відповідності з описаним тут підходом SVG. Використовуючи такий підхід, ви закінчите щось подібне:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

Додаткову інформацію про підтримку браузера тут .

Для Firefox вам не потрібно створювати файл filter.svg, ви можете використовувати схему URI даних .

Здійснення коду css першої відповіді дає:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Не забудьте замінити рядок "utf-8" кодуванням вашого файлу.

Цей метод повинен бути швидшим, ніж інший, оскільки браузеру не потрібно буде робити другий HTTP-запит.

Оновлення: я перетворив це на повне репортаж GitHub, включаючи поліфілінг JavaScript для IE10 та IE11: https://github.com/karlhorky/gray

Спочатку я використовував відповідь SalmanPK , але потім створив варіант нижче, щоб усунути зайвий HTTP-запит, необхідний для SVG-файлу. Вбудований SVG працює у версіях Firefox 10 і вище, а версії нижче 10 більше не становлять навіть 1% світового ринку браузерів.

З цього часу я постійно оновлював рішення в цій публікації блогу , додаючи підтримку для відмирання кольору до кольорів, підтримку IE 10/11 зі SVG та часткову градацію сірого в демонстраційній версії.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  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");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Якщо ви можете використовувати JavaScript, то цей сценарій може бути тим, що ви шукаєте. Він працює крос-браузер і працює для мене чудово до цих пір. Ви не можете використовувати його із зображеннями, завантаженими з іншого домену.

http://james.padolsey.com/demos/grayscale/

Просто отримала таку ж проблему сьогодні. Я спочатку використовував рішення SalmanPK, але виявив, що ефект відрізняється між FF та іншими браузерами. Це тому, що матриця перетворення працює на легкість, а не на світність, як фільтри в Chrome / IE. На мій подив, я дізнався, що альтернативне та простіше рішення у SVG також працює у FF4 + та дає кращі результати:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

З css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Ще одним застереженням є те, що IE10 вже не підтримує функцію "filter: grey:" у режимі, сумісному зі стандартами, тому для роботи потрібен перемикач режиму сумісності в заголовках:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Найпростіший спосіб досягти масштабу сірого лише за допомогою CSS - через filterвласність.

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Властивість досі не підтримується повністю, і все ще потрібна -webkit-filterдля підтримки в усіх веб-переглядачах.

Не здається, що це можливо (поки що), навіть із CSS3 або власними -webkit-або -moz-CSS властивостями.

Однак я знайшов цю публікацію з червня минулого року, яка використовувала SVG-фільтри на HTML. Недоступний у будь-якому поточному веб-переглядачі (демонстрація натякає на власну збірку WebKit), але дуже вражає як доказ концепції.

Люди, які запитують про ігноровану підтримку IE10 + в інших відповідях, перегляньте цей фрагмент CSS:

img.grayscale:hover {
    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");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Застосовано до цієї розмітки:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

Щоб отримати додаткові демонстрації, перегляньте розділ CSS3 Graphics IE testdrive та цей старий блог IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

В Internet Explorer використовуйте властивість фільтра.

У веб-програмі та Firefox наразі немає можливості десантувати зображення виключно за допомогою CSS. тому для рішення клієнта вам потрібно буде використовувати або канву, або SVG.

Але я думаю, що використовувати SVG є більш елегантним. перегляньте мій пост у блозі щодо рішення SVG, яке працює як для Firefox, так і для веб-сайту: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

І строго кажучи, оскільки SVG - HTML, рішення - це чистий html + css :-)

Новий спосіб зробити це вже деякий час доступний у сучасних браузерах.

background-blend-mode дозволяє отримати цікаві ефекти, і одним з них є перетворення сірого масштабу

Значення освітленості , встановлене на білому тлі, дозволяє це. (наведіть курсор, щоб побачити його сірим кольором)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

<div class="test"></div>

Світлість береться із зображення, колір - із фону. Оскільки він завжди білий, кольору немає.

Але це дозволяє набагато більше.

Можна анімувати налаштування ефекту в 3 шари. Перший - зображення, а другий - біло-чорний градієнт. Якщо застосувати для цього режим множення суміші, ви отримаєте білий результат, як і раніше, на білій частині, але вихідне зображення на чорній частині (множення на біле дає біле, множення на чорне не має ефекту).

На білій частині градієнта ви отримуєте такий же ефект, як і раніше. На чорній частині градієнта ви змішуєте зображення над собою, і результат - немодифіковане зображення.

Тепер все, що потрібно, - це перемістити градієнт, щоб цей ефект був динамічним: (наведіть курсор, щоб побачити його в кольорі)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}

<div class="test"></div>

довідник

матриця сумісності

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Можливо, цей спосіб вам допоможе

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

Насправді це простіше зробити з IE, якщо я пам'ятаю правильно, використовуючи власні властивості CSS. Спробуйте це FILTER: Grayз http://www.ssi-developer.net/css/visual-filters.shtml

Метод Ax просто робить зображення прозорим і має чорний фон за ним. Я впевнений, що ви можете стверджувати, що це відтінки сірого.

Хоча ви не хотіли використовувати Javascript, я думаю, вам доведеться ним користуватися. Ви також можете використовувати мову серверної мови для цього.

Якщо ви готові використовувати Javascript, тоді ви можете використовувати полотно для перетворення зображення в відтінки сірого. Оскільки Firefox і Safari підтримують <canvas>, це має працювати.

Тож я переглянув "полотно сірого кольору", і першим результатом було http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html, яке, здається, працює.

підтримка нативних CSS-фільтрів у веб-програмі додана з поточної версії 19.0.1084.46

так -webkit-filter: відтінки сірого (1) працюватимуть, а це простіше, ніж підхід SVG для веб-файлів ...

Ось міксин для МЕНШЕ, який дозволить вам вибрати будь-яку непрозорість. Заповніть самі змінні для звичайного CSS у різних відсотках.

Тут акуратний натяк , він використовує тип насичення для матриці, тому вам не потрібно робити нічого фантазійного, щоб змінити відсоток.

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

Потім використовуйте його:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

Для повного використання вам не потрібно використовувати стільки префіксів, оскільки якщо ви виберете префікс для старого Firefox, вам не потрібно використовувати префікс для нового Firefox.

Тож для повного використання достатньо використовувати цей код:

img.grayscale {
    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: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    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: none;
    -webkit-filter: grayscale(0%);
}

Як доповнення до відповідей інших, можна знецінити зображення на півдорозі на FF без головних болів матриці SVG :

<feColorMatrix type="saturate" values="$v" />

Де $vзнаходиться між 0і 1. Це рівнозначноfilter:grayscale(50%); .

Живий приклад:

.desaturate {
    filter: url("#desaturate");
    -webkit-filter: grayscale(50%);
}
figcaption{
    background: rgba(55, 55, 136, 1);
    padding: 4px 98px 0 18px;
    color: white;
    display: inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 100%;
    font-family: "Helvetica";
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
  	<feColorMatrix type="saturate" values="0.4"/>
  </filter>
</svg>

<figure>
  <figcaption>Original</figcaption>
  <img src="http://www.placecage.com/c/500/200"/>
  </figure>
<figure>
  <figcaption>Half grayed</figcaption>
  <img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>

Довідка про MDN

На основі відповіді Робертка :

Для отримання належної конверсії з кольорового зображення в зображення в градаціях сірого замість використання такої матриці:

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

Ви повинні використовувати матрицю конверсії таким чином:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

Це має чудово працювати для всіх типів зображень на основі моделі RGBA (червоно-зелений-синій-альфа).

Для отримання додаткової інформації, чому ви повинні використовувати матрицю, я розмістив більше шансів на те, що robertc перевіряє наступні посилання:

• Сигнали яскравості та різниці кольорів
• Відповідь Маргуса на запитання: "greyscalevalue in colorvalue" @stackoverflow part: Edit 2: @Hans Passant
• Чарльз А. Буман - університет Пердю - Аналогове телебачення, сторінка 20 та 21
• І тут ви можете знайти кілька кодів C # і VB

Одне жахливе, але працездатне рішення: візуалізуйте зображення за допомогою об'єкта Flash, який надає вам усі можливі перетворення у Flash.

Якщо ваші користувачі використовують спливав кров'ю краю браузерів і якщо Firefox 3.5 і Safari підтримка 4 це (я не знаю , що або зробити / буде), ви можете налаштувати CSS колірного профілю атрибут зображення, встановивши його в відтінках сірого ICC URL-адреса профілю. Але це дуже багато!

бути альтернативою для старшого браузера може бути використання маски, створеної псевдоелементами або вбудованими тегами.

Абсолютне позиціонування наведіть зображення (або область тексту, яка не потребує ні клацання, ні виділення), може тісно імітувати ефекти кольорової гами за допомогою rgba () або translucide png .

Це не дасть однієї кольорової гами, але відтінить колір поза діапазоном.

тест на кодову ручку з 10 різними кольорами через псевдоелемент, останній - сірий. http://codepen.io/gcyrillus/pen/nqpDd (перезавантажте для переключення на інше зображення)

Ви можете використовувати одну з функцій jFunc - використовувати функцію "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

Спробуйте цей плагін jquery. Хоча це не чисте рішення для HTML та CSS, але це ледачий спосіб досягти того, що ви хочете. Ви можете налаштувати свій відтінок сірого, щоб він найкраще відповідав вашому використанню. Використовуйте його наступним чином:

$("#myImageID").tancolor();

Є інтерактив демонстрація . Ви можете пограти з цим.

Перегляньте документацію щодо використання, це досить просто. док

Для масштабу сірого у відсотках у Firefox замість цього використовуйте фільтр насичення : (пошук "насичення")

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"

Якщо ви або хтось, хто зіткнувся з подібною проблемою в майбутньому, ви відкриті для PHP. (Я знаю, ви сказали HTML / CSS, але, можливо, ви вже використовуєте PHP в бекенді) Ось рішення PHP:

Я отримав це з бібліотеки PHP GD і додав змінну для автоматизації процесу ...

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>