Konversi gambar ke skala abu-abu dalam HTML / CSS

619

Apakah ada cara sederhana untuk menampilkan bitmap warna dalam skala abu-abu hanya dengan HTML/CSS?

Tidak perlu kompatibel dengan IE (dan saya kira tidak akan) - jika bekerja di FF3 dan / atau Sf3, itu cukup baik untuk saya.

Saya tahu saya bisa melakukannya dengan baik SVGdan Canvas, tapi itu sepertinya banyak pekerjaan sekarang.

Apakah ada cara orang yang benar-benar malas untuk melakukan ini?

Ken
sumber
14
"Tidak perlu kompatibel dengan IE (dan saya kira tidak akan)" ?? IE menyediakan satu set filter DX sejak 1997 (IE4) yang melakukan pekerjaan ini hanya dengan CSS dan banyak lagi. Sekarang mereka telah menjatuhkan filter DX di IE10 dan secara ketat mengikuti filter berbasis SVG standar. Anda mungkin ingin melihat ini dan demo ini .
gagak vulcan
8
@vulcanraven Ini sebenarnya bukan 'hanya CSS' - jika Anda menonaktifkan skrip aktif di IE, filter berhenti bekerja.
robertc
3
@robertc, itu benar. Sebaliknya, jika Anda menonaktifkan javascript di peramban apa pun, hampir setiap RIA termasuk Stackoverflow akan berhenti bekerja (kecuali jika pengembang web telah menerapkan fallback versi khusus HTML).
gagak vulcan
2
Cukup gunakan CSS stackoverflow.com/questions/286275/gray-out-image-with-css/…. Dapatkan jawaban saya dalam pertanyaan ini
Sakata Gintoki

Jawaban:

728

Dukungan untuk filter CSS telah masuk ke Webkit. Jadi kami sekarang memiliki solusi lintas-browser.

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


Bagaimana dengan Internet Explorer 10?

Anda dapat menggunakan polyfill seperti abu - abu .

Salman Abbas
sumber
1
@CamiloMartin Filter CSS hanya didukung oleh Chrome 18+
Salman von Abbas
2
Pembaruan: Versi stabil terbaru Google Chrome (19) sekarang mendukung filter CSS. Yay! =)
Salman von Abbas
6
Apakah ada solusi untuk Opera?
Rustam
23
Jadi, apa solusinya untuk IE10?
Tom Auger
2
Untuk keturunan: @TomAuger, T&J ini memiliki instruksi spesifik untuk IE10.
Barney
127

Sebagai lanjutan dari jawaban brillout.com , dan juga jawaban Roman Nurik , dan agak merelaksasi persyaratan 'tidak ada SVG', Anda dapat menghilangkan desaturasi gambar di Firefox hanya dengan menggunakan satu file SVG dan beberapa CSS.

File SVG Anda akan terlihat seperti ini:

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

Simpan itu sebagai resources.svg, itu dapat digunakan kembali mulai sekarang untuk gambar apa pun yang ingin Anda ubah ke skala abu-abu.

Di CSS Anda, Anda mereferensikan filter menggunakan filterproperti khusus Firefox :

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

Tambahkan MS proprietary juga jika Anda suka, terapkan kelas itu ke gambar apa pun yang ingin Anda konversi ke skala abu-abu (berfungsi di Firefox> 3.5, IE8) .

sunting : Berikut adalah posting blog yang bagus yang menggambarkan penggunaan filterproperti CSS3 baru dalam jawaban SalmanPK sejalan dengan pendekatan SVG yang dijelaskan di sini. Dengan menggunakan pendekatan itu Anda akan berakhir dengan sesuatu seperti:

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

Informasi dukungan browser lebih lanjut di sini .

robertc
sumber
6
Di webkit Anda melakukan ini: -webkit-filter: grayscale(100%);lalu ini: -webkit-filter: grayscale(0);untuk menghapusnya.
SeanJA
@SeanJA Terima kasih atas pembaruannya, WebKit mulai menerapkan hal ini pada bulan Desember
robertc
Saya melihatnya dalam chrome beta pada laptop linux saya dan mesin win7 saya. Tampaknya tidak berfungsi di chrome stable di linux (tapi sekali lagi, mungkin versi linux ada di belakang windows ').
SeanJA
1
Metode ini berfungsi baik bagi saya di Chrome, tetapi tidak berpengaruh pada Safari. Dalam FF, itu membuat gambar saya tidak terlihat sampai melayang.
colmtuite
85

Untuk Firefox Anda tidak perlu membuat file filter.svg, Anda dapat menggunakan skema URI data .

Mengambil kode css dari jawaban pertama memberi:

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

Berhati-hatilah untuk mengganti string "utf-8" dengan penyandian file Anda.

Metode ini harus lebih cepat daripada yang lain karena browser tidak perlu melakukan permintaan HTTP kedua.

mquandalle
sumber
3
Hanya catatan untuk menyimpan sakit kepala: Kompresor YUI menghapus spasi di url data. Jadi, Anda dapat mempertimbangkan menggunakan minifier lain jika ingin menggunakan solusi ini.
Malte
6
@ Malte Atau mungkin hanya mengganti spasi dengan string "% 20"?
mquandalle
@mquandalle sayangnya IE10 tidak mendukung filter: abu-abu blogs.msdn.com/b/ie/archive/2011/12/07/...
Jedi.za
1
Di firefox abu-abu saya sangat terang. Apakah ada cara untuk meningkatkan kontras atau menggelapkannya sedikit? Peramban lain tampak hebat.
square_eyes
27

Pembaruan: Saya menjadikan ini sebagai repo GitHub lengkap, termasuk JavaScript polyfill untuk IE10 dan IE11: https://github.com/karlhorky/gray

Saya awalnya menggunakan jawaban SalmanPK , tetapi kemudian membuat variasi di bawah ini untuk menghilangkan permintaan HTTP tambahan yang diperlukan untuk file SVG. SVG inline berfungsi di Firefox versi 10 dan di atasnya, dan versi yang lebih rendah dari 10 tidak lagi mencakup bahkan 1% dari pasar browser global.

Sejak itu saya terus memperbarui solusi di posting blog ini , menambahkan dukungan untuk memudar kembali ke warna, dukungan IE 10/11 dengan SVG, dan sebagian abu-abu dalam 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
sumber
14

Jika Anda dapat menggunakan JavaScript, maka skrip ini mungkin yang Anda cari. Ini berfungsi lintas browser dan berfungsi dengan baik untuk saya sejauh ini. Anda tidak dapat menggunakannya dengan gambar yang diambil dari domain yang berbeda.

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

chrismacp
sumber
11

Baru saja mendapat masalah yang sama hari ini. Saya awalnya menggunakan solusi SalmanPK tetapi menemukan efek yang berbeda antara FF dan browser lainnya. Itu karena matriks konversi hanya berfungsi pada kecerahan saja, bukan luminositas seperti filter di Chrome / IE. Yang mengejutkan saya, saya telah menemukan bahwa solusi alternatif dan lebih sederhana di SVG juga berfungsi di FF4 + dan menghasilkan hasil yang lebih baik:

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

Dengan css:

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

Satu lagi peringatan adalah bahwa IE10 tidak mendukung "filter: grey:" dalam mode standar yang sesuai lagi, jadi perlu mode kompatibilitas beralih di header untuk bekerja:

<meta http-equiv="X-UA-Compatible" content="IE=9" />
RobertT
sumber
2
Tampaknya solusi yang lebih baik, lebih sederhana - akan lebih baik jika SalmanPK dan mquandalle memperbarui solusi mereka untuk ini. Rupanya matriks yang mereka gunakan rusak <br> <br> Inilah versi data yang disematkan: 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

Cara termudah untuk mencapai skala abu-abu dengan CSS secara eksklusif adalah melalui filterproperti.

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

Properti masih belum sepenuhnya didukung dan masih membutuhkan -webkit-filterproperti untuk dukungan di semua browser.

NK Chaudhary
sumber
7

Tidak terlihat seperti itu mungkin (belum), bahkan dengan CSS3 atau properti milik -webkit-atau -moz-CSS.

Namun, saya menemukan posting ini dari Juni lalu yang menggunakan filter SVG pada HTML. Tidak tersedia di peramban apa pun saat ini (demo mengisyaratkan pembuatan WebKit khusus), tetapi sangat mengesankan sebagai bukti konsep.

Roman Nurik
sumber
7

Untuk orang-orang yang bertanya tentang dukungan IE10 + yang diabaikan dalam jawaban lain, periksa bagian CSS ini:

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

Diterapkan pada markup ini:

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

Untuk demo lainnya, periksa bagian IE3 CSS testdrive dan blog IE lama ini http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Annie
sumber
7

Di Internet Explorer gunakan properti filter.

Di webkit dan Firefox saat ini tidak ada cara untuk menghapus gambar hanya dengan CSS. jadi Anda harus menggunakan kanvas atau SVG untuk solusi sisi klien.

Tapi saya pikir menggunakan SVG lebih elegan. lihat posting blog saya untuk solusi SVG yang berfungsi untuk Firefox dan webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Dan sebenarnya karena SVG adalah HTML solusinya adalah murni html + css :-)

brillout
sumber
Hai brillout. Saya perhatikan bahwa skala abu-abu Anda sebenarnya gagal di safari. Adakah tindak lanjut? Terima kasih
angsa
1
SVG bukan HTML. Ini spesifikasi yang sangat berbeda.
Camilo Martin
@CamiloMartin Ini adalah SVG dalam spesifikasi HTML .
robertc
1
@robertc Tautan itu adalah tentang menempatkan SVG dalam HTML, tapi inilah spec SVG dan inilah spec HTML . Fakta bahwa keduanya mirip satu sama lain (atau, dengan XML) tidak berarti mereka adalah hal yang sama ...
Camilo Martin
1
Tetapi tautan ke spesifikasi SVG dalam referensi ... Itu tidak mendefinisikan SVG, hanya mengatakan bahwa browser harus menguraikannya. Ini seperti Javascript atau CSS dalam hal itu.
Camilo Martin
6

Cara baru untuk melakukan ini telah tersedia untuk beberapa waktu sekarang di browser modern.

background-blend-mode memungkinkan Anda mendapatkan beberapa efek menarik, dan salah satunya adalah konversi skala abu-abu

Luminositas nilai , yang diatur pada latar belakang putih, memungkinkannya. (arahkan kursor untuk melihatnya berwarna abu-abu)

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

Luminositas diambil dari gambar, warnanya diambil dari latar belakang. Karena selalu putih, tidak ada warna.

Tetapi memungkinkan lebih banyak.

Anda dapat menganimasikan pengaturan efek 3 layer. Yang pertama akan menjadi gambar, dan yang kedua akan menjadi gradien putih-hitam. Jika Anda menerapkan mode campuran multiply pada ini, Anda akan mendapatkan hasil putih seperti sebelumnya pada bagian putih, tetapi gambar asli pada bagian hitam (dikalikan dengan putih memberi putih, mengalikan dengan hitam tidak berpengaruh.)

Pada bagian putih gradien, Anda mendapatkan efek yang sama seperti sebelumnya. Pada bagian hitam dari gradien, Anda memadukan gambar itu sendiri, dan hasilnya adalah gambar yang tidak dimodifikasi.

Sekarang, yang diperlukan hanyalah menggerakkan gradien untuk mendapatkan efek dinamis ini: (arahkan kursor untuk melihatnya dalam warna)

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>

referensi

matriks kompatibilitas

vals
sumber
1
@Andy Saya memulai jawaban saya dengan mengatakan di browser modern
vals
Bagaimana Anda bisa menerapkannya jika imgtag digunakan untuk gambar tidakbackground: url()
Mohammad Elbanna
1
@MohammadElbanna Anda perlu menggunakan mode campuran-alih-alih-campuran-mode
vals
5
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
Amee
sumber
4

Mungkin cara ini membantu Anda

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

w3schools.org

YuZA
sumber
3

Sebenarnya lebih mudah melakukannya dengan IE jika saya ingat benar menggunakan properti CSS berpemilik. Coba ini FILTER: Graydari http://www.ssi-developer.net/css/visual-filters.shtml

Metode oleh Ax hanya membuat gambar transparan dan memiliki latar belakang hitam di belakangnya. Saya yakin Anda bisa berdebat ini abu-abu.

Meskipun Anda tidak ingin menggunakan Javascript, saya pikir Anda harus menggunakannya. Anda juga dapat menggunakan bahasa sisi server untuk melakukannya.

alex
sumber
Saya bahkan tidak punya kotak Windows, jadi terima kasih, tapi itu tidak banyak berguna bagi saya.
Ken
Dalam hal ini, Anda dapat melihatnya dengan Mesin Virtual dengan IE, menerapkan metode kapak atau menggunakan kanvas ... perhatikan bahwa skala abu-abu pada gambar besar dengan kanvas dapat sangat melelahkan pada mesin Javascript.
alex
7
filter: grayhadir di Internet Explorer sejak Versi 4 . Mereka telah mengambil banyak omong kosong untuk produk mereka - benar! - tetapi mereka benar-benar terdepan dalam hal ini
Pekka
2

Jika Anda ingin menggunakan Javascript, maka Anda dapat menggunakan kanvas untuk mengubah gambar menjadi skala abu-abu. Karena Firefox dan Safari mendukung <canvas>, seharusnya berfungsi.

Jadi saya mencari Google "kanvas abu-abu", dan hasil pertama adalah http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html yang tampaknya berfungsi.

Shalom Craimer
sumber
2

dukungan untuk filter CSS asli di webkit telah ditambahkan dari versi saat ini 19.0.1084.46

jadi -webkit-filter: grayscale (1) akan berfungsi dan mana yang lebih mudah daripada pendekatan SVG untuk webkit ...

hjindal
sumber
2

Inilah mixin untuk KURANG yang memungkinkan Anda memilih opacity. Isi variabel Anda sendiri untuk CSS biasa dengan persentase berbeda.

Petunjuk rapi di sini , ia menggunakan tipe saturate untuk matriks sehingga Anda tidak perlu melakukan hal lain untuk mengubah persentase.

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

Kemudian gunakan:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}
James van Dyke
sumber
2

Anda tidak perlu menggunakan banyak awalan untuk penggunaan penuh, karena jika Anda memilih awalan untuk firefox lama, Anda tidak perlu menggunakan awalan untuk firefox baru.

Jadi untuk penggunaan penuh, cukup gunakan kode ini:

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
sumber
2

Sebagai pelengkap jawaban orang lain, dimungkinkan untuk mendesaturasi gambar setengah jalan di FF tanpa sakit kepala matriks SVG :

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

Di mana $vantara 0dan 1. Ini setara dengan filter:grayscale(50%);.

Contoh langsung:

Referensi tentang MDN

Besar
sumber
1

Berdasarkan jawaban robertc :

Untuk mendapatkan konversi yang tepat dari gambar berwarna ke gambar abu-abu alih-alih menggunakan matriks seperti ini:

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

Anda harus menggunakan matriks konversi seperti ini:

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

Ini harus bekerja dengan baik untuk semua jenis gambar berdasarkan model RGBA (red-green-blue-alpha).

Untuk informasi lebih lanjut mengapa Anda harus menggunakan matriks saya memposting lebih mungkin bahwa robertc memeriksa tautan berikut:

Kajiyama
sumber
Saya setuju 0,3333 salah; 0.2126 0.7152 0.0722 0 0tampaknya setara dengan<fecolormatrix type="saturate" values="0">
Neil
Tautan ke "Dan di sini Anda dapat menemukan beberapa kode C # dan VB" dapat ditemukan di arsip internet di sini: web.archive.org/web/20110220101001/http://www.bobpowell.net/…
thisgeek
Tautan ke "Sinyal perbedaan warna dan cahaya" juga terputus. Saya tidak dapat menemukan penggantinya.
thisgeek
0

Salah satu solusi yang mengerikan tetapi bisa diterapkan: render gambar menggunakan objek Flash, yang kemudian memberi Anda semua transformasi yang dimungkinkan dalam Flash.

Jika pengguna Anda menggunakan browser yang canggih dan jika Firefox 3.5 dan Safari 4 mendukungnya (saya tidak tahu apakah itu / akan), Anda dapat menyesuaikan atribut profil warna CSS dari gambar, mengaturnya ke ICC skala abu-abu URL profil. Tapi itu banyak jika!

richardtallent
sumber
0

menjadi Alternatif untuk peramban yang lebih lama bisa menggunakan topeng yang diproduksi oleh pseudo-elements atau inline tag.

Penentuan posisi absolut melayang img (atau area teks yang tidak perlu klik atau seleksi) dapat meniru efek skala warna, melalui rgba () atau png translucide .

Itu tidak akan memberikan satu skala warna tunggal, tetapi akan menaungi warna di luar jangkauan.

uji pada pena kode dengan 10 warna berbeda melalui elemen semu, terakhir berwarna abu-abu. http://codepen.io/gcyrillus/pen/nqpDd (muat ulang untuk beralih ke gambar lain)

G-Cyrillus
sumber
0

Coba plugin jquery ini. Meskipun, ini bukan solusi HTML dan CSS murni, tetapi ini adalah cara malas untuk mencapai apa yang Anda inginkan. Anda dapat menyesuaikan skala abu-abu agar sesuai dengan penggunaan Anda. Gunakan sebagai berikut:

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

Ada demo interaktif . Anda bisa bermain-main dengannya.

Lihat dokumentasi penggunaannya, itu sangat sederhana. docs

Nicholas TJ
sumber
0

Untuk skala abu-abu sebagai persentase di Firefox, gunakan filter saturate : (cari 'saturate')

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
sumber
-1

Jika Anda, atau orang lain yang menghadapi masalah serupa di masa depan terbuka untuk PHP. (Saya tahu Anda mengatakan HTML / CSS, tapi mungkin Anda sudah menggunakan PHP di backend) Berikut adalah solusi PHP:

Saya mendapatkannya dari pustaka GD GD dan menambahkan beberapa variabel untuk mengotomatiskan proses ...

<?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
sumber
4
@ Tom, berdasarkan suara dan favorit pada pertanyaan asli, OP bukan satu-satunya orang yang bertanya-tanya apakah ini mungkin. Tentu, jawaban ini mungkin membengkokkan aturan, tetapi saya tidak melihat gunanya menurunkan jawaban yang mungkin berguna bagi banyak orang.
Michael Martin-Smucker
1
@ Tom, meskipun itu mungkin bukan jawaban yang tepat untuk pertanyaan, mungkin berguna karena sebenarnya "memecahkan" masalah grayscale tanpa "kerumitan" javascript, mungkin dia bahkan tidak mempertimbangkan atau tahu tentang PHP GD, tidak ada salahnya dimaksudkan. @ mlms13 itulah intinya, terima kasih :)
Trufa
Itu buruk saya, "berpikir" tentang itu pengguna lain dapat mengambil manfaat dari posting ini lolos dari pikiran saya .. Maaf @ Trufa.
Sentakan
3
Itu memang membantu saya, menempatkan saya di jalur yang benar setelah beberapa jalan buntu lainnya. Saya menemukan bahwa menggunakan "imagefilter ($ source, IMG_FILTER_GRAYSCALE);" memberikan hasil yang jauh lebih baik. (Hanya PHP 5)
chrismacp
5
Terpilih, karena ini hampir di luar topik. Grayscaling gambar di sisi server sama sekali berbeda dari CSS / HTML.
Simon Steinberger