PNG görüntüsünün rengi CSS aracılığıyla değiştirilsin mi? (10)

Düzenlemek--

Font-Awesome farklı sınıf adlarını kullanıyor Yeni sürüm Bunun nedeni muhtemelen CSS dosyalarını önemli ölçüde küçültmesi ve belirsiz CSS sınıflarından kaçınmasıdır. Yani şimdi şunu kullanmalısınız:

Yalnızca bir simge istiyorsanız yazı tipinin tamamını yazmanıza gerek yok, ayrıca bunun daha "temiz" olduğunu düşünüyorum ayrı eleman. Dolayısıyla HTML5'te bu amaçla SVG'yi doğrudan belge akışının içine yerleştirebilirsiniz. Daha sonra sınıfı .CSS stil sayfasında tanımlayabilir ve fill özelliğini kullanarak arka plan rengine erişebilirsiniz:

Örnekte davranışı göstermek için :hover kullandığımı unutmayın; Eğer sadece "normal" durumun rengini değiştirmek istiyorsanız, sözde sınıfı kaldırmalısınız.

Cevap veriyorum çünkü buna bir çözüm arıyordum.

Beyaz veya siyah bir arka planınız varsa @chrscblls adresindeki tanıtıcı iyi yanıt verir, ancak ben vermedim. Ayrıca resimler ng-repeat kullanılarak oluşturuldu, bu yüzden URL'mi css'imde bulunduramadım ve img etiketlerinde ::after kullanamazsınız.

Ben de bunu denemeye karar verdim ve eğer onlar da burada takılıp kalıyorlarsa bunun insanlara yardımcı olabileceğini düşündüm.

Ben de neredeyse aynı şeyi üç ana farkla yaptım:

• img etiketimde bulunan URL'yi (ve etiketi) işten sonra :: içeren başka bir div'e koydum.
• "mix-blend-mode", "çarpma" veya "ekran" yerine "fark" olarak ayarlanmıştır.
• Tamamen aynı değere sahip bir::before ekledim, böylece ::after, ::before tarafından yapılan "farkların" "farkını" yapar ve onu tersine çevirir.

Siyahtan beyaza veya beyazdan siyaha değiştirmek için arka plan renginin beyaz olması gerekir. Siyahtan renge kadar istediğiniz rengi seçebilirsiniz. Beyazdan o renge istediğiniz rengin tam tersini seçmeniz gerekiyor.

DivClass( konum: göreceli; genişlik: %100; yükseklik: %100; text-align: sol; ) .divClass:hover::after, .divClass:hover::before( konum: mutlak; genişlik: %100; yükseklik: %100; arka plan: #FFF; karıştırma-karıştırma modu: fark: "";

img etiketleri de diğerleri gibi bir arka plan özelliğine sahiptir. Şablon gibi şeffaf bir şekle sahip beyaz bir PNG'niz varsa şunu yapabilirsiniz:

Rengi tam anlamıyla değiştirmek için -webkit filtresiyle CSS geçişini etkinleştirebilirsiniz; burada bir şey olduğunda seçtiğiniz -webkit filtresini kullanırsınız. Örneğin:

Img ( -webkit-filter:gri tonlamalı(0%); geçiş: -webkit-filter 0,3s doğrusal; ) img:hover ( -webkit-filter:gri tonlamalı(75%); )

Bir değere eklediğiniz bu harika codepen örneğini buldum altıgen renk, ve bu rengi png'ye uygulamak için gerekli filtreyi döndürür

örneğin aşağıdaki renge sahip olmak için png'me ihtiyacım vardı #1a9790

o zaman aşağıdaki png filtresini kendinize uygulamalısınız

Filtre: ters çevir (%48) sepya (%13) doygunluk (%3207) renk tonu döndürme (130 derece) parlaklık (%95) kontrast (%80);

Bunu bir SVG filtresi kullanarak yapabildim. Orijinal görüntünün rengini değiştirmek istediğiniz renkle çarpan bir filtre yazabilirsiniz. Aşağıdaki kod parçasında sel rengi görüntünün rengini değiştirmek istediğimiz renktir (içinde bu durumda o kırmızı). FeComposite, filtreye rengi nasıl işlediğimizi anlatır. Aritmetik içeren feComposite formülü (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) şeklindedir; burada i1 ve i2, sırasıyla in/in2 için giriş renkleridir. Yani yalnızca k1 = 1'in belirtilmesi, yalnızca i1 * i2'yi yapacağı anlamına gelir, bu da her iki giriş rengini birlikte çarpmak anlamına gelir.

Not. Bu yalnızca HTML5 ile çalışır çünkü satır içi SVG kullanır. Ancak SVG'yi ayrı bir dosyaya koyarak bunun daha eski bir tarayıcıda çalışmasını sağlayabileceğinizi düşünüyorum. Bu yaklaşımı henüz denemedim.

İşte bir kesit:

Aslında var Photoshop'ta bir nesnenin rengini değiştirmenin birçok yolu. Daha önce bunu kullanarak nasıl yapacağımıza zaten bakmıştık ve ayrıca Photoshop kullanarak saç rengini nasıl değiştireceğimizi de öğrenmiştik.

Bunların hepsi yöntem değil, bugün çok basit iki yöntem göstereceğim ve gelecekteki makalelerde diğer ayarlama katmanlarını kullanan birkaç yöntemden daha bahsedeceğim.

Yöntem No.1

Bu yöntemin uygulanmasından kısaca bahsedeceğim. Resmi açın ve yeni bir katman oluşturun (Size tüm teknikleri hatırlatıyorum).

Ardından, Katmanlar paletinin (listenin altında bulunur) üst kısmındaki açılır listeden Ton'u seçerek bu katmanın karıştırma modunu değiştirin.

Daha sonra B tuşuna basarak seçim yapın, ön plan renk göstergesine tıklayın, açılan palet iletişim kutusunda bir renk tonu seçin ve Tamam butonuna tıklayın. Daha önce yeni bir katman seçtikten sonra nesnenin üstüne çizim yapın.

Fazlalığın üzerini boyarsanız E tuşunu basılı tutarak Silgi aracını geçici olarak seçebilirsiniz. Yeni katmana katman maskesi ekleyip, değiştirilmesi gerekmeyen alanları siyahla gizleyerek bu tür durumları önceden önleyebilirsiniz.

Not

Yeniden boyadığınız alan siyah, beyaz ve gri ile çevrelenmişse, ikincisinin üzerini güvenle boyayabilirsiniz ve bunlar hiç değişmeyecektir. Bunun nedeni, Ton karışım modunda, renkle doldurulmuş alanların yalnızca alttaki katmanın zaten renk içeren alanlarını etkilemesidir.

Yöntem No.2

Menü komutunu hatırlıyor musunuz? Benzer menü komutu Rengi değiştir bir tonu vurgulamak ve onu bir başkasıyla değiştirmek için kullanılabilir. Bu komut, değiştirilmesi gereken renk, yukarıdaki resimdeki araba gövdesi gibi az çok tekdüze ve belirli bir alanda yoğunlaşmışsa çok işe yarar.

Menüden komutun seçilmesi Resim - Düzeltme - Rengi Değiştir aynı isimde bir iletişim kutusu göreceksiniz.

Damlalık aracı zaten seçilmiş olduğundan, görüntüde değiştirmek istediğiniz gölgeye tıklayın. Yazıtın bulunduğu bir karede görünecek Renk kontrol grubunda Seçim iletişim kutusunun üst kısmında.

Kontrol grubunda Yenisiyle değiştirme iletişim kutusunun altında yazıtın üzerinde bulunan kareye tıklayın Sonuç yeni bir renk tonu seçmek için. Tamam düğmesine tıkladığınızda. Seçilen gölgeyi ayarlamanız gerekiyorsa kaydırıcıları kullanabilirsiniz. Renk tonu, Doyma Ve Parlaklık(Seçim kontrol grubunda da bulunur). İşte olanlar:

Sıradan pipete ek olarak, yakınlarda küçük "+" (artı) ve "-" (eksi) simgeleri bulunan pipetlerin bulunduğunu lütfen unutmayın. Değiştirilmesi gereken renk tonu aralığını genişletmek/daraltmak için bunları kullanın.

Gördüğünüz gibi biraz abarttım ve arabamın tekerlekleri de mora döndü. Bu şunu önerir Bu method her zaman yararlı olmayabilir.

Metinde bir hata fark ederseniz onu seçin ve Ctrl + Enter tuşlarına basın. Teşekkür ederim!

PNG formatında bir dosyayı düzenlemeniz gerekiyorsa, çoğu kişi yalnızca bir ücret karşılığında dağıtılmayan, aynı zamanda bilgisayar kaynaklarını da oldukça talep eden Photoshop'u indirmek için acele ediyor. Eski bilgisayarların tümü bu uygulamayı çalıştıramaz. Bu gibi durumlarda, çeşitli çevrimiçi düzenleyiciler kurtarmaya gelir ve dosyalarla yeniden boyutlandırmanıza, ölçeklendirmenize, sıkıştırmanıza ve çok sayıda başka işlem gerçekleştirmenize olanak tanır.

Bugün PNG formatındaki görsellerle çalışmanıza olanak tanıyan en işlevsel ve kararlı sitelere bakacağız. Bu tür çevrimiçi hizmetlerin avantajları arasında, dosyalarla ilgili tüm manipülasyonlar bulut teknolojileri kullanılarak gerçekleştirildiğinden, bilgisayarınızın kaynaklarını talep etmemeleri yer alır.

Çevrimiçi düzenleyicilerin PC'nize kurulmasına gerek yoktur; bu, virüs kapma olasılığını önemli ölçüde azaltır.

Yöntem 1: Çevrimiçi Görüntü Düzenleyici

Kullanıcıları izinsiz reklamlarla rahatsız etmeyen en işlevsel ve istikrarlı hizmet. Her türlü manipülasyona uygundur PNG resimleri Bilgisayarınızın kaynaklarından kesinlikle fazla talep görmeyen mobil cihazlarda çalıştırılabilir.

Hizmetin dezavantajları arasında Rus dilinin bulunmaması, ancak uzun süreli kullanım yer alıyor bu dezavantaj farkedilmez hale gelir.

Site kayıt gerektirmiyor; İngilizce bilmeseniz bile hizmeti anlamak kolaydır. Denemekten korkmayın; bir şeyler ters giderse, tek bir tıklamayla her zaman bunu geri alabilirsiniz.

Yöntem 2: Photoshop Çevrimiçi

Geliştiriciler hizmetlerini çevrimiçi Photoshop olarak konumlandırıyorlar. Düzenleyicinin işlevselliği dünyaca ünlü uygulamaya gerçekten benzer; PNG dahil farklı formatlardaki görüntülerle çalışmayı destekler. Daha önce Photoshop ile çalıştıysanız kaynağın işlevselliğini anlamak zor olmayacaktır.

Sitenin tek ama oldukça önemli dezavantajı, özellikle büyük resimlerle çalışıyorsanız sürekli donmasıdır.

Basit manipülasyonlar gerçekleştirirken hizmetle çalışmak rahat ve konforludur. Büyük bir dosyayı işlemeniz gerekiyorsa, özel bir dosya indirip yüklemeniz önerilir. yazılım veya sabırlı olun ve sürekli site donmalarına hazırlanın.

Yöntem 3: Fotor

PNG formatındaki görüntülerle çalışmak için kullanışlı, işlevsel ve en önemlisi ücretsiz bir site olan Fotor, kırpmanıza, döndürmenize, efekt eklemenize ve diğer araçları kullanmanıza olanak tanır. Kaynağın işlevselliği farklı boyutlardaki dosyalar üzerinde test edildi ve herhangi bir sorun bulunamadı. Site Rusçaya çevrilmiştir; ayarlarda gerekirse farklı bir editör arayüzü dili seçebilirsiniz.

Erişim Ek fonksyonlar kullanıcılara yalnızca PRO hesap satın aldıktan sonra sunulur.

Fotor, PNG ile çalışmak için güçlü bir araçtır: bir dizi temel işleve ek olarak, en talepkar kullanıcıyı bile memnun edecek birçok ek efekt içerir.

Çevrimiçi fotoğraf düzenleyicilerin kullanımı kolaydır; bilgisayara kurulum gerektirmezler, dolayısıyla bunlara mobil cihaz. Hangi editörü kullanacağınız size kalmış.

Önemli olan, resmi bilgisayarınızda veya telefonunuzda belirtmek, değiştirmek istediğiniz renkleri seçmek, sayfanın altındaki Tamam'a tıklamak, birkaç saniye beklemek ve bitmiş sonucu indirmektir.

Değişiklik yapılmayan ve pembe rengin değiştirildiği bir gülün fotoğrafı: menekşe, mavi, turkuaz, yeşil Ve sarı:


Yukarıdaki örnekleri oluşturmak için aşağıdaki ayarlar kullanıldı: " Yedek renk" - "pembe", " Değiştirilecek renk" - "mor" (sonraki işlem için "mavi" vb.), " Renk değiştirme yoğunluğu" - "45".

Her şey tek renkli hale gelirse, çok fazla yer değiştirilirse veya diğer renkler etkilenirse “Renk Değiştirme Yoğunluğunu” düşürmeniz gerekir. Tersine, herhangi bir değişiklik görünmüyorsa veya renk tamamen değişmediyse, o zaman “Renk Değiştirme Yoğunluğunu” artırmanız ve ayrıca renkleri doğru belirttiğinizden ve örneğin kırmızı ile pembeyi karıştırmadığınızdan emin olmanız gerekir. Rengi daha doğru belirtmek için HEX formatını kullanabilirsiniz. Ayarlar farklı resimler için farklı olabilir; hem renge hem de piksel cinsinden boyuta bağlıdır.

Değiştiremeyeceğinizi lütfen unutmayın siyah, gri veya beyaz bazı doygun renk ancak doymuş rengi neredeyse beyaz, siyah veya gri renkle değiştirebilirsiniz. Basitçe söylemek gerekirse, gökkuşağının herhangi bir rengini veya ayarlardaki açılır listelerde bulunan renklere yakın renkleri değiştirebilirsiniz. Bunun nedeni, renk değiştirme algoritmasının, gri tonlamalı veya siyah beyaz görüntüleri etkilemeyen ton değişikliğiyle ilişkilendirilmesidir. 14 megapikselden (≈4592x3048) büyük bir görüntüyü işlemeniz gerekiyorsa, bunu ihtiyacınız olan ayarlarla birlikte posta kutunuza gönderin; bu, 24 saat içinde ücretsiz olarak yapılacaktır.

Orijinal görüntü hiçbir şekilde değiştirilmez. Size başka bir işlenmiş görüntü sağlanacaktır.