Konwertuj obraz na skalę szarości w HTML / CSS

619

Czy istnieje prosty sposób na wyświetlenie kolorowej mapy bitowej w skali szarości za pomocą just HTML/CSS?

Nie musi być kompatybilny z IE (i wyobrażam sobie, że nie będzie) - jeśli działa w FF3 i / lub Sf3, to mi wystarczy.

Wiem, że mogę to zrobić zarówno z SVGCanvasem, ale wydaje mi się, że to teraz dużo pracy.

Czy istnieje sposób naprawdę leniwy?

Rozpoznać
źródło
14
„Nie musi być kompatybilny z IE (i myślę, że nie będzie)” ?? IE dostarcza zestaw filtrów DX od 1997 roku (IE4), który wykonuje to zadanie za pomocą CSS i wiele więcej. Teraz upuścili filtry DX w IE10 i ściśle przestrzegają standardowych filtrów opartych na SVG. Możesz rzucić okiem na to i to demo .
vulcan raven
8
@vulcanraven To nie jest tak naprawdę „zwykły CSS” - jeśli wyłączysz aktywne skrypty w IE, filtry przestaną działać.
robertc,
3
@robertc, to prawda. W przeciwieństwie do tego, jeśli wyłączysz javascript w dowolnej przeglądarce, prawie każda RIA, w tym Stackoverflow, przestanie działać (chyba że programista zaimplementował rezerwową wersję tylko HTML).
vulcan raven
2
Wystarczy użyć CSS stackoverflow.com/questions/286275/gray-out-image-with-css/… Uzyskaj moją odpowiedź na to pytanie
Sakata Gintoki

Odpowiedzi:

728

Obsługa filtrów CSS wylądowała w Webkit. Mamy teraz rozwiązanie dla różnych przeglądarek.

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/">


Co z programem Internet Explorer 10?

Możesz użyć wypełnienia jak szary .

Salman Abbas
źródło
1
@CamiloMartin Filtry CSS są obsługiwane tylko przez Chrome 18+
Salman von Abbas
2
Aktualizacja: Najnowsza stabilna wersja Google Chrome (19) obsługuje teraz filtry CSS. Tak! =)
Salman von Abbas
6
Czy jest jakieś rozwiązanie dla Opery?
Rustam,
23
Jakie jest rozwiązanie dla IE10?
Tom Auger
2
W przypadku potomności: @TomAuger, niniejsze pytania i odpowiedzi zawierają szczegółowe instrukcje dla IE10.
Barney,
127

Opierając się na brillout.com na odpowiedź , a także odpowiedzią Romana Nurika i nieco rozluźnieniem wymogu „bez SVG”, możesz desaturować obrazy w Firefoksie, używając tylko jednego pliku SVG i trochę CSS.

Twój plik SVG będzie wyglądał następująco:

<?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>

Zapisz to jako resources.svg, odtąd można go ponownie użyć do dowolnego obrazu, który chcesz zmienić na skalę szarości.

W swoim CSS odwołujesz się do filtra za pomocą filterwłaściwości specyficznej dla Firefoksa :

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

Dodaj również zastrzeżone MS, jeśli masz na to ochotę, zastosuj tę klasę do dowolnego obrazu, który chcesz przekonwertować na skalę szarości (działa w Firefox> 3.5, IE8) .

edycja : Oto miły wpis na blogu, który opisuje użycie nowej filterwłaściwości CSS3 w odpowiedzi SalmanPK w zgodzie z opisanym tutaj podejściem SVG. Korzystając z tego podejścia, uzyskasz coś w rodzaju:

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 */
}

Więcej informacji na temat obsługi przeglądarki tutaj .

robertc
źródło
6
W webkicie robisz to: -webkit-filter: grayscale(100%);następnie to: -webkit-filter: grayscale(0);aby go usunąć.
SeanJA
@SeanJA Dzięki za aktualizację, WebKit zaczął wdrażać te rzeczy w grudniu
robertc
Widzę to w chrome beta zarówno na moim laptopie z linuksem, jak i na mojej maszynie z Win7. Wygląda na to, że nie działał w chromie stabilnym w systemie Linux (ale z drugiej strony jest możliwe, że wersja systemu Linux znajduje się za oknami).
SeanJA
1
Ta metoda działa dla mnie dobrze w Chrome, ale nie działa w Safari. W FF sprawia, że ​​moje zdjęcia są niewidoczne do momentu najechania myszą.
colmtuite
85

W przeglądarce Firefox nie musisz tworzyć pliku filter.svg, możesz użyć schematu URI danych .

Podjęcie kodu css pierwszej odpowiedzi daje:

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+ */

Pamiętaj, aby zastąpić ciąg „utf-8” kodowaniem pliku.

Ta metoda powinna być szybsza niż druga, ponieważ przeglądarka nie będzie musiała wykonywać drugiego żądania HTTP.

mquandalle
źródło
3
Tylko uwaga, aby zaoszczędzić bólu głowy: Kompresor YUI usuwa spacje w adresach URL danych. Możesz więc rozważyć użycie innego minizatora, jeśli chcesz skorzystać z tego rozwiązania.
Malte
6
@Malte A może po prostu zastąpisz spacje ciągiem „% 20”?
mquandalle,
@mquandalle niestety IE10 nie obsługuje filtra: szary blogs.msdn.com/b/ie/archive/2011/12/07/…
Jedi.za
1
W Firefoksie moja szarość jest bardzo jasna. Czy jest jakiś sposób, aby zwiększyć kontrast lub go nieco przyciemnić? Inne przeglądarki wyglądają świetnie.
square_eyes
27

Aktualizacja: Zrobiłem to w pełne repozytorium GitHub, w tym polifill JavaScript dla IE10 i IE11: https://github.com/karlhorky/gray

Pierwotnie użyłem odpowiedzi SalmanPK , ale utworzyłem poniższą odmianę, aby wyeliminować dodatkowe żądanie HTTP wymagane dla pliku SVG. Inline SVG działa w Firefox 10 i nowszych wersjach, a wersje niższe niż 10 nie stanowią już nawet 1% globalnego rynku przeglądarek.

Od tego czasu aktualizuję rozwiązanie w tym poście na blogu , dodając obsługę przejścia z powrotem do koloru, obsługę IE 10/11 z SVG i częściową skalę szarości w wersji demo.

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%);
}
Karl Horky
źródło
14

Jeśli umiesz używać JavaScript, skrypt może być tym, czego szukasz. Działa w różnych przeglądarkach i do tej pory działa dla mnie dobrze. Nie można go używać z obrazami załadowanymi z innej domeny.

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

chrismacp
źródło
11

Właśnie dziś mam ten sam problem. Początkowo korzystałem z rozwiązania SalmanPK, ale odkryłem, że efekt ten różni się między FF a innymi przeglądarkami. To dlatego, że matryca konwersji działa tylko na lekkość, a nie na jasność, jak filtry w Chrome / IE. Ku mojemu zaskoczeniu dowiedziałem się, że alternatywne i prostsze rozwiązanie w SVG działa również w FF4 + i daje lepsze wyniki:

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

Z css:

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

Jeszcze jedno zastrzeżenie polega na tym, że IE10 nie obsługuje już „filtru: szarego” w trybie zgodnym ze standardami, dlatego do działania wymaga przełącznika trybu zgodności w nagłówkach:

<meta http-equiv="X-UA-Compatible" content="IE=9" />
RobertT
źródło
2
Wydaje się lepsze, prostsze rozwiązanie - byłoby dobrze, gdyby SalmanPK i mquandalle zaktualizowały swoje rozwiązania w tym zakresie. Najwyraźniej używana przez nich matryca jest zepsuta <br> <br> Oto osadzona wersja danych: filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
psdie
11

Najprostszym sposobem na osiągnięcie skali szarości wyłącznie za pomocą CSS jest filterwłaściwość.

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

Właściwość nadal nie jest w pełni obsługiwana i nadal wymaga -webkit-filterwłaściwości do obsługi we wszystkich przeglądarkach.

NK Chaudhary
źródło
7

Nie wydaje się, że jest to możliwe (jeszcze), nawet w przypadku CSS3 lub własności -webkit-lub -moz-właściwości CSS.

Znalazłem jednak ten post z czerwca ubiegłego roku, który używał filtrów SVG w HTML. Niedostępne w żadnej bieżącej przeglądarce (wersja demonstracyjna wskazująca na niestandardową kompilację WebKit), ale bardzo imponujące jako dowód koncepcji.

Roman Nurik
źródło
7

Dla osób, które pytają o ignorowane wsparcie IE10 + w innych odpowiedziach, sprawdź ten fragment 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;
}

Zastosowane do tego znacznika:

<!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>

Więcej demonstracji znajdziesz w sekcji Grafika CSS3 testdrive w IE i na starym blogu IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Annie
źródło
7

W przeglądarce Internet Explorer użyj właściwości filter.

W webkicie i Firefoksie nie ma obecnie sposobu na desatuarte obrazu wyłącznie za pomocą CSS. więc musisz użyć płótna lub SVG do rozwiązania po stronie klienta.

Ale myślę, że używanie SVG jest bardziej eleganckie. sprawdź mój post na blogu dotyczący rozwiązania SVG, które działa zarówno w przeglądarce Firefox, jak i w pakiecie internetowym: internetowym http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

I ściśle mówiąc, ponieważ SVG to HTML, rozwiązaniem jest czysty html + css :-)

brillout
źródło
cześć brillout. Zauważyłem, że twoja skala szarości faktycznie zawiedzie podczas safari. Jakieś dalsze? Dzięki
łabędź
1
SVG to nie HTML. To zupełnie inna specyfikacja.
Camilo Martin
@CamiloMartin Oto SVG w specyfikacji HTML .
robertc
1
@robertc Ten link dotyczy wstawiania pliku SVG w kodzie HTML, ale tutaj jest specyfikacja SVG, a tutaj specyfikacja HTML . Fakt, że oba są do siebie podobne (lub XML), nie oznacza, że ​​są tym samym ...
Camilo Martin
1
Ale łączy się ze specyfikacją SVG w odnośniku ... Nie definiuje SVG, po prostu mówi, że przeglądarki powinny to przeanalizować. Pod tym względem przypomina JavaScript lub CSS.
Camilo Martin,
6

Od jakiegoś czasu nowy sposób jest dostępny w nowoczesnych przeglądarkach.

Tryb mieszania tła pozwala uzyskać ciekawe efekty, a jednym z nich jest konwersja skali szarości

Wartość jasności , ustawiona na białym tle, pozwala na to. (najedź, aby zobaczyć to na szaro)

.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>

Jasność jest pobierana z obrazu, kolor jest pobierany z tła. Ponieważ jest zawsze biały, nie ma koloru.

Ale pozwala na znacznie więcej.

Możesz animować efekt ustawiając 3 warstwy. Pierwszy będzie obrazem, a drugi biało-czarnym gradientem. Jeśli zastosujesz w tym trybie tryb wielokrotnego mieszania, uzyskasz biały wynik jak na białej części, ale oryginalny obraz na czarnej części (pomnożenie przez biel daje biel, pomnożenie przez czerń nie ma żadnego efektu).

W białej części gradientu uzyskasz taki sam efekt jak poprzednio. W czarnej części gradientu mieszasz obraz nad sobą, a wynikiem jest niezmodyfikowany obraz.

Teraz wystarczy przesunąć gradient, aby uzyskać dynamiczny efekt: (najedź kursorem, aby zobaczyć go w kolorze)

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>

odniesienie

macierz kompatybilności

vals
źródło
1
@Andy zacząłem swoją odpowiedź mówiąc w nowoczesnych przeglądarkach
vals
Jak możesz to zastosować, jeśli imgtag nie jest używany dla obrazubackground: url()
Mohammad Elbanna
1
@MohammadElbanna Musisz użyć trybu mieszania mieszania zamiast trybu mieszania tła
vals
5
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
Amee
źródło
4

Może w ten sposób ci pomogę

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

w3schools.org

YuZA
źródło
3

W rzeczywistości łatwiej jest to zrobić za pomocą IE, jeśli dobrze pamiętam, używając zastrzeżonej własności CSS. Wypróbuj to FILTER: Grayna stronie http://www.ssi-developer.net/css/visual-filters.shtml

Metoda Axa sprawia, że ​​obraz jest po prostu przezroczysty i ma za sobą czarne tło. Jestem pewien, że możesz argumentować, że to jest skala szarości.

Chociaż nie chcesz używać Javascript, myślę, że będziesz musiał go używać. Możesz także użyć do tego języka po stronie serwera.

alex
źródło
Nie mam nawet Windowsa, więc dziękuję, ale to mi niewiele przydaje.
Ken
W takim przypadku możesz na to spojrzeć za pomocą maszyny wirtualnej z IE, zaimplementować metodę axa lub użyć płótna ... zauważ, że skalowanie szarości na dużych obrazach z płótnem może być dość obciążające dla silnika JavaScript.
Alex
7
filter: grayjest obecny w Internet Explorerze od wersji 4 . Wzięli dużo badziewia za swój produkt - słusznie! - ale naprawdę wyprzedzili swój czas przy tych rzeczach
Pekka
2

Jeśli chcesz używać Javascript, możesz użyć płótna, aby przekonwertować obraz na skalę szarości. Ponieważ obsługuje Firefox i Safari<canvas> powinna działać.

Więc przejrzałem „płótno w skali szarości”, a pierwszym rezultatem było http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html, które wydaje się działać.

Shalom Craimer
źródło
2

obsługa natywnych filtrów CSS w pakiecie webkit została dodana z bieżącej wersji 19.0.1084.46

więc -webkit-filter: grayscale (1) będzie działać i co jest łatwiejsze niż podejście SVG dla webkit ...

hjindal
źródło
2

Oto mix dla MNIEJ, który pozwoli Ci wybrać dowolne krycie. Wypełnij zmienne samodzielnie dla zwykłego CSS przy różnych wartościach procentowych.

Przytulna wskazówka , używa matrycy typu nasycenia, więc nie musisz robić nic fantazyjnego, aby zmienić procent.

.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);
}

Następnie użyj go:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}
James van Dyke
źródło
2

Nie musisz używać tak wielu prefiksów, aby w pełni wykorzystać, ponieważ jeśli wybierzesz prefiks dla starego firefoxa, nie potrzebujesz używać prefiksu dla nowego firefoxa.

Aby więc w pełni wykorzystać, wystarczy użyć tego kodu:

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%);
}
maťo
źródło
2

Jako uzupełnienie odpowiedzi innych można desaturować obraz w połowie drogi do FF bez bólu głowy matrycy SVG :

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

Gdzie $vjest pomiędzy 0i 1. Jest to równoważne z filter:grayscale(50%);.

Przykład na żywo:

Odniesienie do MDN

Bigood
źródło
1

Na podstawie odpowiedzi robertc :

Aby uzyskać prawidłową konwersję obrazu kolorowego na obraz w skali szarości zamiast korzystania z takiej matrycy:

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

Powinieneś użyć takiej macierzy konwersji:

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

Powinno to działać dobrze dla wszystkich typów obrazów opartych na modelu RGBA (czerwono-zielono-niebiesko-alfa).

Aby uzyskać więcej informacji, dlaczego warto użyć matrycy, opublikowałem bardziej prawdopodobne, że robertc sprawdzi jedno z poniższych linków:

Kajiyama
źródło
Zgadzam się, że 0.3333 jest źle; 0.2126 0.7152 0.0722 0 0wydaje się być odpowiednikiem<fecolormatrix type="saturate" values="0">
Neil
Link do „I tutaj można znaleźć kody C # i VB” można znaleźć w archiwum internetowym tutaj: web.archive.org/web/20110220101001/http://www.bobpowell.net/…
thisgeek
Link do „Sygnałów różnicy luminancji i różnicy kolorów” również jest zerwany. Nie mogłem znaleźć zamiennika.
thisgeek
0

Jedno okropne, ale wykonalne rozwiązanie: renderowanie obrazu za pomocą obiektu Flash, który następnie daje wszystkie możliwe transformacje we Flashu.

Jeśli Twoi użytkownicy używają najnowocześniejszych przeglądarek i jeśli Firefox 3.5 i Safari 4 to obsługują (nie wiem, czy to zrobią / zrobią), możesz dostosować atrybut profilu koloru CSS obrazu, ustawiając go na skalę szarości ICC URL profilu. Ale to dużo jeśli!

richardtallent
źródło
0

być alternatywą dla starszej przeglądarki może być użycie maski utworzonej przez pseudoelementy lub tagi wbudowane.

Bezwzględne pozycjonowanie najechania na obraz (lub obszar tekstowy, który nie wymaga kliknięcia ani zaznaczenia) może ściśle naśladować efekty skali kolorów, za pomocą rgba () lub png .

Nie da jednej skali kolorów, ale odcień kolorów poza zakresem.

test na piórze kodowym w 10 różnych kolorach za pomocą pseudoelementu, ostatni to szary. http://codepen.io/gcyrillus/pen/nqpDd (załaduj ponownie, aby przełączyć na inny obraz)

Cyrylica
źródło
0

Wypróbuj tę wtyczkę jquery. Chociaż nie jest to czyste rozwiązanie HTML i CSS, ale jest to leniwy sposób na osiągnięcie tego, co chcesz. Możesz dostosować skalę szarości do swoich potrzeb. Użyj go w następujący sposób:

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

Jest interaktywne demo . Możesz się z tym bawić.

Sprawdź dokumentację dotyczącą użytkowania, jest to dość proste. dokumenty

Nicholas TJ
źródło
0

W przypadku skali szarości jako wartości procentowej w przeglądarce Firefox użyj filtru nasycenia : (wyszukaj „nasycenie”)

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"
dval
źródło
-1

Jeśli Ty lub ktoś, kto napotka podobny problem w przyszłości, jesteś otwarty na PHP. (Wiem, że powiedziałeś HTML / CSS, ale może już używasz PHP w backend). Oto rozwiązanie PHP:

Mam go z biblioteki PHP GD i dodałem zmienną do automatyzacji procesu ...

<?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);

?>
Trufa
źródło
4
@Tom, w oparciu o głosy i ulubione w pierwotnym pytaniu, OP nie jest jedyną osobą, która zastanawiała się, czy jest to możliwe. Jasne, ta odpowiedź może nagiąć reguły, ale nie widzę sensu w głosowaniu na odpowiedź, która może być przydatna dla wielu ludzi.
Michael Martin-Smucker,
1
@Tom, myślałem, że choć może to nie być dokładna odpowiedź na pytanie, może się przydać, ponieważ faktycznie „rozwiązuje” problem skali szarości bez „kłopotów” z javascript, może nawet nie zastanawiał się ani nie wiedział o PHP GD, bez zamierzonej szkody. @ mlms13 właśnie o to chodziło, dzięki :)
Trufa
To moje złe, „pomyślałem” o tym, że inni użytkownicy mogą skorzystać z tego postu wymknęło mi się z głowy. Przepraszam @Trufa.
wstrząs
3
To mi pomogło, postawiłem na właściwej drodze po kilku innych ślepych zaułkach. Odkryłem, że używając „imagefilter ($ source, IMG_FILTER_GRAYSCALE);” dał jednak znacznie lepszy wynik. (Tylko PHP 5)
chrismacp
5
Głosowałem w dół, ponieważ jest to praktycznie nie na temat. Skala szarości obrazu po stronie serwera jest zupełnie inna niż CSS / HTML.
Simon Steinberger