PNG görüntüsünün rengi CSS ile değiştirilsin mi?

466

Beyazda basit bir şekil gösteren şeffaf bir PNG verildiğinde, bunun rengini bir şekilde CSS ile değiştirmek mümkün mü? Bir çeşit kaplama mı yoksa ne değil?

css  image  colors  png  overlay 
— Wesley
kaynak
4
background-colorCSS özelliğini ayarlayabilirsiniz . Sabitlenecek saydam olmayan bir parça ve CSS aracılığıyla istediğiniz herhangi bir renkle doldurulacak saydam bir parça oluşturabilirsiniz. Ulaşmak istediğiniz bu mu?
— jakub.g
2
@qbk, bu sadece bir yorum değil, cevaplamaya değer. Ve beni teknik olarak 1 saniye geçtin.
— Kirill G
2
% 100 siyah veya% 100 beyaz (arka plan saydam kalır) herhangi bir simgeyi yeniden renklendirmek için karıştırma modlu psuedo öğelerini kullanabilirsiniz. Cevabımı burada görebilirsiniz: stackoverflow.com/a/39796437/1472114
— chrscblls

Yanıtlar:

571

Sen ile filtreler kullanabilirsiniz -webkit-filterve filter: Filtreler nispeten tarayıcılara yeni ancak aşağıdaki CanIUse tabloya göre tarayıcıların 90'dan% olarak desteklenir: https://caniuse.com/#feat=css-filters

Görüntüyü gri tonlamalı, sepya ve çok daha fazlasıyla değiştirebilirsiniz (örneğe bakın).

Artık bir PNG dosyasının rengini filtrelerle değiştirebilirsiniz.

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">
Snippet'i genişlet

Kaynak

— РАВИ
kaynak
12
Bu nedenle kısa yanıt, tarayıcıların çoğu için genel bir çözüm bulunmamasıdır.
— Trilarion
18
Ama renk tonu veya doygunluk aslında beyaz bir görüntüye bir şey yapar mı?
— Keith
6
2016 Güncellemesi: Bu, IE dışında hemen hemen tüm tarayıcılarda çalışıyor: caniuse.com/#feat=css-filters
— Stan
4
@datatype_void Bazen başlangıç ​​görüntüsünü kendiniz denetlemezsiniz. Yani, benim açımdan geçerli olduğunu kabul ediyorsun, siyah veya beyazdan başlayarak herhangi bir renge ulaşamazsın. Oh, ve bu sonuca varmak için 5 dakikadan fazla oynadım.
— 16:15
5
Ayrıca bunun gibi şeyler yapabileceğinizi belirtin: Bu .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }, siyah ve şeffaf veya gri tonlamadan renge
— gidebileceğiniz
141

Onaltılık renk değerinizi girdiğiniz bu büyük codepen örneğini buldum ve bu rengi png'ye uygulamak için gerekli filtreyi döndürüyor

Siyahtan hedef altıgen renge dönüştürmek için CSS filtre üreteci

örneğin ben aşağıdaki png olması için benim png gerekli # 1a9790

o zaman png'ye aşağıdaki filtreyi uygulamanız gerekir

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
— Fadi Abo Msalam
kaynak
12
<3 <3 <3 <3 <3 <3
— dwjohnston
2
Bu kodu kullanarak maviden beyaza renk değiştirdim:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
— Anjan Biswas
Bu harika!!
— Thiago Pires
2
Yazar bir heykeli hak ediyor! (şuna dikkat edin: parlaklık (0) doygunluk (% 100) isteğe bağlı olarak herhangi bir şüphe öldürür)
— Jackie Degl'Innocenti
1
— dwjohnston
56

Simge yazı tiplerine bir göz atmak isteyebilirsiniz. http://css-tricks.com/examples/IconFont/

EDIT: En son projemde Font-Awesome kullanıyorum . Hatta çizebilirsin. Bunu şuraya koyun <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">

Ardından devam edin ve bunun gibi bazı simge bağlantıları ekleyin:

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

İşte tam hile sayfası

--Düzenle--

Font-Awesome, yeni sürümde farklı sınıf adları kullanır, çünkü bu, CSS dosyalarını önemli ölçüde daha küçük hale getirir ve belirsiz css sınıflarını önlemek için. Şimdi şunu kullanmalısınız:

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

DÜZENLEME 2:

Sadece öğrendim github ayrıca kendi simge yazı tipi kullanır: Octicons Indirmek ücretsizdir. Ayrıca kendi simge yazı tiplerinizi nasıl oluşturacağınıza dair bazı ipuçları var .

— Jules Colle
kaynak
Font Awesome ismine kadar yaşıyor.
— HerrimanCoder
Kutunun dışında düşünmek için +1. Ve bugünlerde (svg) bir görüntüden bir web fontu oluşturmanıza yardımcı olmak için kullanımı kolay çevrimiçi uygulamalar var.
— yvan vander sanden
<a class="icon-thumbs-up"> </a> eski sınıf adı ve <a class="fa fa-thumbs-up"> </a> yeniyse sanmıyorum CSS daha küçük yapar, ben fa ve fa-thumbs-up arasında ek bir boşluk görebilirsiniz, yanılmıyorsam o CSS dosyasına en az 1 ek bayt ekleyin?
— Brandito
Font Awesome, harikaydı, maalesef google'ı ve kullanıcıları mutsuz hale getiren render engellemesi. İlk olarak hem CSS hem de ikili yazı tipi dosyalarından kullanılmayan yazı tiplerini kaldırarak verileri yarıya indirerek ele aldık. Şimdi tamamen kaldırma ve engelleme oluşturmayan (DOM ve CSSOM işlemi daha hızlı, sayfadaki öğelerin daha hızlı görünmesini sağlayan) basit bir hareketli grafikle değiştirme sürecindeyiz ve verileri 6KB'ye kadar% 75 oranında azaltacağız. FA 100KB civarındadır. CSS maskeleri bizim durumumuzda yardımcı olabilir, ancak muhtemelen gereksizdir.
— YK
25

Bunu SVG filtresini kullanarak yapabildim. Kaynak görüntünün rengini değiştirmek istediğiniz renkle çarpan bir filtre yazabilirsiniz. Aşağıdaki kod parçacığında, sel rengi , görüntü rengini değiştirmek istediğimiz renktir (bu durumda Kırmızı'dır.) FeComposite, filtreye rengi nasıl işlediğimizi söyler. Aritmetik olan feComposite için formül (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) 'dir, burada i1 ve i2 buna göre in / in2 için giriş renkleridir. Bu nedenle, yalnızca k1 = 1 belirtilmesi, yalnızca i1 * i2 yapacağı anlamına gelir, bu da her iki giriş renginin birlikte çarpılması anlamına gelir.

Not: Bu satır içi SVG kullandığından yalnızca HTML5 ile çalışır. Ancak, SVG'yi ayrı bir dosyaya koyarak bu eski tarayıcıyla çalışabileceğinizi düşünüyorum. Bu yaklaşımı henüz denemedim.

Snippet: 

<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>
Snippet'i genişlet

— Vasan Jiaramaneetwesin
kaynak
4
Adamım bu cevabı soydun. Görüntüleri filtrenin ötesinde renklendirmek isteyen herkes: hue-rotate yapabilir - bunu yapmanın yolu budur.
— MaxPRafferty
23

İmg etiketi, tıpkı diğerleri gibi bir background özelliğine sahiptir. Şablon gibi şeffaf bir şekle sahip beyaz bir PNG'niz varsa, bunu yapabilirsiniz:

<img src= 'stencil.png' style= 'background-color: red'>
— Kirill G
kaynak
147
Beyaz kısmın şeffaf olmasını değil, farklı renkte olmasını istiyorum.
— Wesley
2
şimdiye kadar bulduğum en iyi çözüm. Çok kötü, sadece web sitelerinizde düz bir arka plan rengi kullanırsanız çalışır
— Jules Colle
8
@Wesley, en sevdiğiniz görüntü düzenleyicisini ve maskeleri kullanarak yapabileceğiniz görüntüyü ters çevirmeniz gerekir (böylece beyaz bit şeffaf ve geri kalan beyaz olur).
— Charles Goodwin
5
@CharlesGoodwin Bu işe yararsa görüntü beyaz bir arka plana yerleştirilir.
— Alex
21

Evet :)

Surfin 'Safari - Blog Arşivi »CSS Maskeleri

WebKit artık CSS'de alfa maskeleri destekliyor. Maskeler, bir kutunun içeriğini, son ekranda o kutunun bölümlerini çıkarmak için kullanılabilecek bir desenle kaplamanızı sağlar. Başka bir deyişle, görüntünün alfalarını temel alan karmaşık şekillere kırpabilirsiniz.
[...]
Web tasarımcılarına bu maskeler ve nasıl uygulandıkları üzerinde çok fazla kontrol sağlamak için yeni özellikler ekledik. Yeni özellikler, zaten var olan arka plan ve kenarlık görüntüsü özelliklerine benzer.

-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
kaynak
1
Webkit ile ilgili herhangi bir bilgi bulamadığım için herhangi bir (henüz gelecekteki) standardın bir parçası mı, yoksa sadece Apple lezzeti mi? Görünüşe göre W3, bu tür kullanımlar için SVG öneriyor: w3.org/TR/SVG/masking.html
— feeela
3
Ne yazık ki bu sadece webkit gibi görünüyor ve blog gerçek örnekler yerine birleştirilmiş resimler kullanarak hile yapıyor. Bu cevap biraz kırmızı ringa balığı.
— Charles Goodwin
17

In çoğu tarayıcı , Filtrelerin kullanım:

  • hem <img>elemanlarda hem de diğer elemanların arka plan görüntülerinde

  • ve bunları CSS'nizde statik olarak veya JavaScript kullanarak dinamik olarak ayarlayın

Aşağıdaki demolara bakın.

<img> elementler

Bu tekniği bir <img>öğeye uygulayabilirsiniz :

#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" />
Snippet'i genişlet

Arka plan resimleri

Bu tekniği bir arka plan resmine uygulayabilirsiniz:

#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>
Snippet'i genişlet

JavaScript

Çalışma zamanında bir filtre ayarlamak için JavaScript'i kullanabilirsiniz:

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>
Snippet'i genişlet

— John Slegers
kaynak
6
Soru, beyaz bir görüntüyü şeffaf bir arka planla renklendirmekle ilgiliydi. hue-rotatebeyaz üzerinde çalışmaz.
— 17'de Synetech
17

Bunun için bir çözümüm olduğunu düşünün: a) tam olarak 5 yıl önce aradığınız şey ve b) buradaki diğer kod seçeneklerinden biraz daha basit.

Herhangi bir beyaz png ile (örn. Saydam arka plan üzerinde beyaz simge), yeniden renklendirmek için bir :: after selektörü ekleyebilirsiniz.

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

Bu kod penceresine bakın (fareyle üzerine geldiğinde renk değişimini uygulayarak): http://codepen.io/chrscblls/pen/bwAXZO

— chrscblls
kaynak
İmgur görüntüsünü yeniden gölgede bıraktım, yüklerken bazı sıkıntılar yaşıyordum.
— chrscblls
Chrome'un en son sürümünde, (şeffaf) arka plan da renk olarak ayarlanıyor gibi görünüyor. Bağlantılı örnekte, üzerine geldiğimde sadece opak bir pembe kare görüyorum ... Firefox'ta iyi çalışıyor.
— logidelic
1
@chrscblls Bağlantı öldü.
— Steven Lu
15

Benim için çalışan en basit satır:

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

Rengi daha açık veya daha koyu yapmak için opaklığı 0'dan 1'e ayarlayabilirsiniz.

— Rehmat
kaynak
Güzel. Bu, buradaki diğer çözümlerin tüm sınırlamalarını önler.
— cdonner
3
daha güçlü hale getirmek için gölge-2-3 kez tekrarlayın
— djdance
1
GENIUS ÇÖZÜM, CSS'de biraz dağınık görünüyor, ancak bir yorum ile mükemmel bir şekilde anlaşılabilir. Teşekkürler!
— Richard KeMiKaL GeNeRaL Denton
tam renk elde etmek için çalışmayacak, her zaman orijinal renk ve yeni renk arasında bir çeşit karışım.
— swisswiss
bu yaklaşım görüntüyü biraz bozar ve gölge her uygulandığında kötüleşir. Bir kopyasının kopyasını çıkarmak gibi, sonuçlar orijinalden farklıdır.
— SMAG
8

Bunu googling yaparken buldum, benim için en iyisini buldum ...

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
kaynak
Bu işe yarar, ben oy verdim. Ama sadece kayıt için arka plan resmini boyutlandıramıyor, görüntüyü konumlandıramıyor ve tekrar ediyor gibi bazı problemleri var.
— Daniel
Ohh, ben gerçekten bunları denemedim ... linki aşağıda deneyin. developer.mozilla.org/tr-TR/docs/Web/CSS/-webkit-mask-box-image teşekkürler, Daniel
— Muthukumar Anbalagan
7

Belirli bir renk istedim, bu yüzden filtre benim için çalışmadı.

Bunun yerine, CSS çoklu arka plan görüntülerinden ve doğrusal degrade işlevinden (bir görüntünün kendisini oluşturan) yararlanan bir div oluşturdum. Kaplama harmanlama modunu kullanırsanız, gerçek görüntünüz istediğiniz rengi içeren oluşturulan "gradyan" görüntü ile karıştırılacaktır (burada, # 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>
Snippet'i genişlet

— rolznz
kaynak
Benim için çalışmadı. Nedenini anlayamıyorum, tam olarak yapıştırdım
— Vic Seedoubleyew
@ Snicpet iyi çalışıyor. CSS'nizin gerçekten uygulandığından emin olmak için div araçlarınızı kullanarak div'nizi inceleyin. Ayrıca, sağladığım URL'yi kullanmıyorsanız resminizin URL'sinin geçerli olduğundan emin olun. DÜZENLEME: Parçacık sizin için çalışmazsa, eski veya doğrusal gradyan işlevini desteklemeyen bir tarayıcı kullanıyor olabilirsiniz.
— rolznz
5

Cevap veriyorum çünkü bunun için bir çözüm arıyordum.

@chrscblls yanıtındaki kalem, beyaz veya siyah bir arka planınız varsa iyi çalışır, ancak benimki değildi. Ayrıca, görüntüler ng-repeat ile oluşturuldu, bu yüzden kendi css benim url olamazdı ve img etiketlerinde :: sonra kullanamazsınız.

Bu yüzden, etrafta bir çalışma buldum ve burada çok yanarlarsa insanlara yardımcı olabileceğini düşündüm.

Yani yaptığım üç ana farkla hemen hemen aynı:

  • url benim img etiketinde olmak, ben (ve bir etiket) başka bir div hangi koymak :: sonra çalışacak.
  • 'mix-blend-mode', 'çarpma' veya 'ekran' yerine 'fark' olarak ayarlanır.
  • Bir :: önce tam olarak aynı değerle ekledim, :: sonra :: önce :: tarafından yapılan 'farkın' farkını 'yapacaktı ve kendini iptal etti.

Siyahtan beyaza veya beyazdan siyaha değiştirmek için arka plan renginin beyaz olması gerekir. Siyahtan renklere, istediğiniz rengi seçebilirsiniz. Beyazdan renklere kadar, istediğiniz rengin karşıt rengini seçmeniz gerekir.

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

Yalnızca bir simgeye ihtiyacınız varsa, yazı tipi setine gerek yoktur, ayrıca tek bir öğe olarak daha "temiz" olduğunu hissediyorum. Bu nedenle, HTML5'te bir SVG'yi doğrudan belge akışının içine yerleştirebilirsiniz. Ardından .CSS stil sayfanızda bir sınıf tanımlayabilir ve arka plan rengine şu fillözellikle erişebilirsiniz :

Çalışan keman: http://jsfiddle.net/qmsj0ez1/

Örnekte, :hoverdavranışı göstermek için kullandığımı unutmayın ; sadece "normal" durum için renk değiştirmek istiyorsanız, sözde sınıfı kaldırmalısınız.

— Pere
kaynak
1

Kelimenin tam anlamıyla rengini değiştirmek için, bir şey olduğunda seçtiğiniz -webkit-filtresini çağıracağınız bir -webkit-filter ile bir CSS geçişi ekleyebilirsiniz. Örneğin:

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

Bir resmi siyahtan beyaza veya beyazdan siyaha değiştirirken, renk döndürme filtresi çalışmaz, çünkü siyah ve beyaz teknik olarak renkler değildir. Bunun yerine, ters filtre özelliği ile siyah ve beyaz renk değişiklikleri (siyahtan beyaza veya tersi) yapılmalıdır.

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

— Samuel stankiewicz
kaynak
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>
Snippet'i genişlet

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

— Bashirpour
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.