Ubah warna gambar PNG melalui CSS?

465

Dengan PNG transparan yang menampilkan bentuk sederhana dalam warna putih, apakah mungkin mengubah warna ini melalui CSS? Semacam overlay atau apa yang tidak?

css image colors png overlay Wesley
sumber
4
Anda dapat mengatur background-colorproperti CSS. Anda dapat membuat bagian non-transparan yang akan diperbaiki, dan bagian transparan dari gambar yang akan diisi oleh warna apa pun yang Anda suka melalui CSS. Itukah yang ingin Anda capai?
jakub.g
2
@ qbk, ini layak mendapat jawaban, bukan hanya komentar. Dan Anda mengalahkan saya 1 detik, secara teknis.
Kirill G
2
Anda dapat menggunakan elemen psuedo dengan mode blending untuk mewarnai ulang ikon apa pun yang 100% hitam atau 100% putih (latar belakang tetap transparan). Lihat jawaban saya di sini: stackoverflow.com/a/39796437/1472114
chrscblls

Jawaban:

570

Anda dapat menggunakan filter dengan -webkit-filterdan filter: Filter relatif baru untuk browser tetapi didukung di lebih dari 90% browser berdasarkan tabel CanIUse berikut: https://caniuse.com/#feat=css-filters

Anda dapat mengubah gambar menjadi skala abu-abu, sepia, dan banyak lagi (lihat contoh).

Jadi sekarang Anda dapat mengubah warna file PNG dengan filter.

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">
Luaskan cuplikan

Sumber

РАВИ
sumber
12
Jadi jawaban singkatnya adalah tidak ada solusi umum untuk sebagian besar browser.
Trilarion
18
Tetapi akankah huerotate atau saturate benar-benar melakukan anthing ke gambar putih?
Keith
6
Pembaruan 2016: ini sekarang berfungsi di hampir semua browser kecuali IE: caniuse.com/#feat=css-filters
Stan
4
@datatype_void Terkadang Anda sendiri tidak mengontrol gambar awal. Jadi, sepertinya Anda setuju bahwa poin saya valid, Anda tidak bisa mendapatkan warna apa pun mulai dari hitam atau putih. Oh, dan saya bermain lebih dari 5 menit untuk mencapai kesimpulan ini.
AsGoodAsItGets
5
juga menentukan bahwa Anda dapat melakukan hal-hal seperti ini: .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }yang berarti Anda DAPAT beralih dari hitam & transparan atau abu-abu ke warna dan bekerja bahkan pada gif animasi
tatsu
141

Saya menemukan contoh codepen hebat ini bahwa Anda memasukkan nilai warna hex dan mengembalikan filter yang diperlukan untuk menerapkan warna ini ke png

CSS filter generator untuk mengkonversi dari warna hitam ke warna hex target

misalnya saya perlu png saya untuk memiliki warna # 1a9790 berikut

maka Anda harus menerapkan filter berikut untuk Anda png

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
Fadi Abo Msalam
sumber
12
<3 <3 <3 <3 <3
dwjohnston
2
Saya telah mengubah warna menjadi putih dari biru menggunakan kode ini:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
Anjan Biswas
Ini bagus !!
Thiago Pires
2
Penulis pantas mendapatkan patung! (perhatikan: kecerahan (0) saturate (100%) opsional opsional yang membunuh keraguan)
Jackie Degl'Innocenti
1
Jika ada yang membutuhkannya, ini adalah konversi TS dari kode ini gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08
dwjohnston
56

Anda mungkin ingin melihat font Icon. http://css-tricks.com/examples/IconFont/

EDIT: Saya menggunakan Font-Awesome pada proyek terbaru saya. Anda bahkan dapat mem-bootstrapnya. Sederhananya di Anda <head>:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

Dan kemudian lanjutkan dan tambahkan beberapa tautan ikon seperti ini:

<a class="icon-thumbs-up"></a>

Inilah lembar contekan lengkapnya

--edit--

Font-Awesome menggunakan nama kelas yang berbeda di versi baru, mungkin karena ini membuat file CSS secara drastis lebih kecil, dan untuk menghindari kelas css yang ambigu. Jadi sekarang Anda harus menggunakan:

<a class="fa fa-thumbs-up"></a>

EDIT 2:

Baru tahu github juga menggunakan font ikonnya sendiri: Octicons Gratis untuk diunduh. Mereka juga memiliki beberapa tips tentang cara membuat font ikon Anda sendiri .

Jules Colle
sumber
Font Awesome sesuai dengan namanya.
HerrimanCoder
+1 untuk berpikir di luar kotak. Dan saat ini ada aplikasi online yang mudah digunakan untuk membantu Anda membuat webfont dari gambar (svg).
yvan vander sanden
Jika <a class="icon-thumbs-up"> </a> adalah nama kelas lama dan <a class="fa fa-thumbs-up"> </a> adalah yang baru, saya tidak berpikir itu membuat CSS lebih kecil, saya bisa melihat spasi tambahan antara fa dan fa-thumbs-up, tambahkan setidaknya 1 byte tambahan ke file CSS itu jika saya tidak salah?
Brandito
Font Awesome hebat di zamannya, sayangnya pemblokirannya membuat, yang membuat google dan penggunanya tidak senang. Kami pertama-tama mengatasi hal ini dengan menghapus font yang tidak terpakai dari CSS dan file font biner, mengurangi data sekitar setengahnya. Kami sekarang sedang dalam proses menghapus sama sekali dan mengganti dengan sprite sederhana, yang tidak memblokir render (proses DOM dan CSSOM lebih cepat, membuat elemen pada halaman tampak lebih cepat), dan akan mengurangi data sebesar 75%, hingga 6KB. FA sekitar 100KB. Topeng CSS dapat membantu dalam kasus kami, tetapi mungkin tidak perlu.
YK
25

Saya sudah bisa melakukan ini menggunakan filter SVG. Anda bisa menulis filter yang mengalikan warna gambar sumber dengan warna yang ingin Anda ubah. Dalam cuplikan kode di bawah ini, warna banjir adalah warna yang ingin kami ubah warna gambar menjadi (yang Merah dalam kasus ini.) FeComposite memberi tahu filter cara kami memproses warna. Rumus untuk feComposite dengan aritmatika adalah (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) di mana i1 dan i2 adalah warna input untuk in / in2 sesuai. Jadi hanya menentukan k1 = 1 berarti hanya akan melakukan i1 * i2, yang berarti mengalikan kedua warna input secara bersamaan.

Catatan: Ini hanya berfungsi dengan HTML5 karena ini menggunakan inline SVG. Tapi saya pikir Anda mungkin dapat membuat ini berfungsi dengan browser yang lebih lama dengan meletakkan SVG di file yang terpisah. Saya belum mencoba pendekatan itu.

Berikut cuplikannya: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>
Luaskan cuplikan

Vasan Jiaramaneetwesin
sumber
4
Man Anda dirampok pada jawaban ini. Siapa pun yang ingin mewarnai gambar di luar filter: hue-rotate dapat melakukannya - ini adalah cara untuk melakukannya.
MaxPRafferty
23

Tag img memiliki properti latar belakang seperti yang lainnya. Jika Anda memiliki PNG putih dengan bentuk transparan, seperti stensil, maka Anda dapat melakukan ini:

<img src= 'stencil.png' style= 'background-color: red'>
Kirill G
sumber
147
Saya ingin bagian putih berwarna berbeda, bukan bagian transparan.
Wesley
2
solusi terbaik yang saya temukan sejauh ini. Sayang sekali itu hanya akan berfungsi jika Anda menggunakan warna latar belakang yang solid di situs web Anda
Jules Colle
8
@ Wesley Anda perlu membalikkan gambar itu (sehingga bit putih menjadi transparan dan sisanya putih) yang dapat Anda lakukan menggunakan editor gambar dan topeng favorit Anda.
Charles Goodwin
5
@CharlesGoodwin Itu hanya berfungsi maka gambar ditempatkan di latar belakang putih.
Alex
21

Iya :)

Surfin 'Safari - Blog Archive »CSS Masks

WebKit sekarang mendukung masker alpha di CSS. Masker memungkinkan Anda untuk overlay konten kotak dengan pola yang dapat digunakan untuk merobohkan bagian-bagian dari kotak itu di tampilan akhir. Dengan kata lain, Anda dapat klip ke bentuk kompleks berdasarkan alpha dari suatu gambar.
[...]
Kami telah memperkenalkan properti baru untuk memberikan banyak kontrol kepada desainer Web atas topeng ini dan bagaimana mereka diterapkan. Properti baru dianalogikan dengan properti gambar latar dan perbatasan yang sudah ada.

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)
benhowdle89
sumber
1
Apakah itu bagian dari standar (yang akan datang), karena saya tidak menemukan informasi apa pun yang tidak terkait dengan Webkit, atau apakah itu hanya rasa Apple? Tampaknya bahwa W3 adalah menyarankan SVG untuk usecases seperti: w3.org/TR/SVG/masking.html
feeela
3
Sayangnya ini tampaknya hanya webkit dan blog menipu dengan menggunakan gambar yang dikomposit daripada contoh yang sebenarnya. Jawaban ini sedikit herring merah.
Charles Goodwin
17

Di sebagian besar browser , Anda dapat menggunakan filter:

  • pada <img>elemen dan gambar latar belakang elemen lainnya

  • dan atur secara statis di CSS Anda, atau secara dinamis menggunakan JavaScript

Lihat demo di bawah ini.

<img> elemen

Anda bisa menerapkan teknik ini ke <img>elemen:

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />
Luaskan cuplikan

Gambar latar belakang

Anda dapat menerapkan teknik ini pada gambar latar:

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<div id="original"></div>

<div id="changed"></div>
Luaskan cuplikan

JavaScript

Anda dapat menggunakan JavaScript untuk menetapkan filter saat runtime:

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;
#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}
<div id="original"></div>

<div id="changed"></div>
Luaskan cuplikan

John Slegers
sumber
6
Pertanyaannya adalah tentang mewarnai gambar putih dengan latar belakang transparan. hue-rotatetidak berfungsi pada warna putih.
Synetech
17

Pikirkan saya punya solusi untuk ini yaitu a) persis apa yang Anda cari 5 tahun yang lalu, dan b) sedikit lebih sederhana daripada opsi kode lainnya di sini.

Dengan png putih apa pun (mis., Ikon putih pada latar belakang transparan), Anda dapat menambahkan pemilih :: after ke warna ulang.

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

Lihat codepen ini (menerapkan color swap on hover): http://codepen.io/chrscblls/pen/bwAXZO

chrscblls
sumber
Saya memasang ulang gambar imgur, mengalami masalah saat memuatnya.
chrscblls
Di versi terbaru Chrome, sepertinya latar belakang (transparan) juga diatur ke warna. Dalam contoh yang ditautkan, ketika saya mengarahkan kursor, saya hanya melihat kotak merah muda buram ... Bekerja dengan baik di Firefox.
logidelic
1
@ chrscblls Tautannya sudah mati.
Steven Lu
15

Satu baris paling sederhana yang bekerja untuk saya:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

Anda dapat mengatur opacity dari 0 ke 1 untuk membuat warna lebih terang atau lebih gelap.

Rehmat
sumber
Bagus. Ini menghindari semua batasan dari solusi lain di sini.
Gordon
3
ulangi drop-shadow 2-3 kali untuk membuatnya lebih kuat
djdance
1
SOLUSI GENIUS, terlihat sedikit berantakan di CSS, tetapi dengan komentar, itu bisa dimengerti. Terima kasih!
Richard KeMiKaL GeNeRaL Denton
tidak akan bekerja untuk mendapatkan warna yang tepat, selalu ada semacam campuran antara warna asli dan yang baru.
swisswiss
pendekatan ini sedikit mendistorsi gambar dan semakin buruk setiap kali drop-shadow diterapkan. Seperti membuat salinan salinan, hasilnya berbeda dari aslinya.
SMAG
8

Saya menemukan ini saat googling, saya menemukan yang terbaik bekerja untuk saya ...

HTML

<div class="img"></div>

CSS

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

Muthukumar Anbalagan
sumber
Ini berhasil, saya memilih. Tetapi hanya untuk catatan itu memang memiliki beberapa masalah seperti tidak dapat ukuran gambar latar belakang, tidak dapat memposisikan gambar dan itu memang berulang.
Daniel
Ohh, saya benar-benar tidak mencoba itu ... coba tautan di bawah ini. developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image terima kasih, Daniel
Muthukumar Anbalagan
7

Saya membutuhkan warna tertentu, jadi filter tidak berfungsi untuk saya.

Sebagai gantinya, saya membuat div, mengeksploitasi beberapa gambar latar belakang CSS dan fungsi linear-gradient (yang membuat gambar itu sendiri). Jika Anda menggunakan mode campuran overlay, gambar Anda yang sebenarnya akan dicampur dengan gambar "gradien" yang dihasilkan yang mengandung warna yang Anda inginkan (di sini, # BADA55)

.colored-image {
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
        background-blend-mode: overlay;
        background-size: contain;
        width: 200px;
        height: 200px;        
    }
<div class="colored-image"></div>
Luaskan cuplikan

rolznz
sumber
Tidak bekerja untuk saya. Saya tidak tahu mengapa, saya menyalinnya dengan tepat
Vic Seedoubleyew
@VicSeedoubleyew snippet berfungsi dengan baik. Periksa div Anda menggunakan alat dev untuk memastikan CSS Anda benar-benar diterapkan. Juga, pastikan URL ke gambar Anda valid jika Anda tidak menggunakan yang saya berikan. EDIT: Jika snipet tidak berfungsi untuk Anda, Anda mungkin menggunakan browser yang kedaluwarsa atau tidak mendukung fungsi linear-gradient.
rolznz
5

Menjawab karena saya sedang mencari solusi untuk ini.

jawaban pena di @ chrscblls berfungsi dengan baik jika Anda memiliki latar belakang putih atau hitam, tetapi pena saya tidak. Juga, gambar dihasilkan dengan ng-repeat, jadi saya tidak bisa memiliki url mereka di css saya DAN Anda tidak bisa menggunakan :: after on img tag.

Jadi, saya mencari jalan keluar dan berpikir itu mungkin membantu orang jika mereka tersandung di sini.

Jadi apa yang saya lakukan hampir sama dengan tiga perbedaan utama:

  • url yang berada di tag img saya, saya letakkan (dan label) di div lain di mana :: after akan berfungsi.
  • 'campur-campur-mode' diatur pada 'perbedaan' alih-alih 'multiply' atau 'layar'.
  • Saya menambahkan :: sebelum dengan nilai yang persis sama sehingga :: after akan melakukan 'perbedaan' dari 'perbedaan' yang dibuat oleh :: before dan membatalkannya sendiri.

Untuk mengubahnya dari hitam menjadi putih atau putih menjadi hitam, warna latar belakang harus putih. Dari hitam ke warna, Anda dapat memilih warna apa pun. Dari putih ke warna, Anda harus memilih warna yang berlawanan dari yang Anda inginkan.

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG

Salix
sumber
3

Tidak perlu mengatur seluruh font jika Anda hanya membutuhkan satu ikon, ditambah lagi saya merasa itu lebih "bersih" sebagai elemen individu. Jadi, untuk tujuan ini, dalam HTML5 Anda dapat menempatkan SVG langsung di dalam aliran dokumen. Kemudian Anda dapat mendefinisikan kelas di stylesheet .CSS Anda dan mengakses warna latar belakangnya dengan fillproperti:

Biola yang bekerja: http://jsfiddle.net/qmsj0ez1/

Perhatikan bahwa, dalam contoh, saya telah digunakan :hoveruntuk menggambarkan perilaku; jika Anda hanya ingin mengubah warna untuk keadaan "normal", Anda harus menghapus pseudoclass.

Pere
sumber
1

Untuk benar-benar mengubah warna, Anda bisa memasukkan transisi CSS dengan -webkit-filter di mana ketika sesuatu terjadi Anda akan memanggil -webkit-filter pilihan Anda. Sebagai contoh:

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }
beta208
sumber
1

Ketika mengubah gambar dari hitam menjadi putih, atau putih menjadi hitam, filter hue rotate tidak berfungsi, karena hitam dan putih secara teknis bukan warna. Sebaliknya, perubahan warna hitam dan putih (dari hitam ke putih atau sebaliknya) harus dilakukan dengan properti filter invert.

.img1 { filter: invert(100%); }

Samuel stankiewicz
sumber
0 

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}
<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>
Luaskan cuplikan

Sumber: https://codepen.io/taryaoui/pen/EKkcu

Bashirpour
sumber