CSS ile PNG görüntüsünün rengini değiştirme?

Question

Daha

Kaynak Non AMP-version Düzenle

CSS ile PNG görüntüsünün rengini değiştirme?

Beyaz renkte basit bir şekil gösteren şeffaf bir PNG verildiğinde, bunun rengini CSS aracılığıyla bir şekilde değiştirmek mümkün müdür? Bir çeşit kaplama ya da başka bir şey?

John Slegers

Edited question 2017ösp53ös14 Temmuz 2017 в 2:53

Programlama

image png overlay css colors

2011ööp53öö11 Eylül 2011 в 11:53

36 görünümler

Jules Colle · Answer 1 · 2012-11-13T08:15:24+00:00

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

EDIT: Son projemde Font-Awesome kullanıyorum. Hatta bootstrap bile yapabilirsiniz. Bunu basitçe `` içine koyun:

Ve sonra devam edin ve bunun gibi bazı simge bağlantıları ekleyin:

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

İşte tam hile sayfası

--edit--

Font-Awesome yeni sürümde farklı sınıf adları kullanıyor, bunun nedeni muhtemelen CSS dosyalarını büyük ölçüde küçültmek ve belirsiz css sınıflarından kaçınmak. Yani şimdi kullanmalısınız:

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

EDIT 2:

Az önce github'ın da kendi simge yazı tipini kullandığını öğrendim: Octicons İndirmesi ücretsizdir. Ayrıca kendi simge yazı tiplerinizi nasıl oluşturacağınız hakkında bazı ipuçları da var.

Kirill G · Answer 2 · 2011-09-14T11:58:07+00:00

Kirill G

Kaynak Non AMP-version Düzenle

img etiketinin de tıpkı diğerleri gibi bir arka plan özelliği vardır. Şablon gibi şeffaf bir şekle sahip beyaz bir PNG'niz varsa bunu yapabilirsiniz:

24

0

Yorumlar (5)

benhowdle89 · Answer 3 · 2011-09-14T11:58:03+00:00

Evet :)

Surfin' Safari - Blog Arşivi » CSS Maskeleri

WebKit artık CSS'de alfa maskelerini destekliyor. Maskeler, bir kutunun içeriğini, son görüntüde bu kutunun bazı kısımlarını çıkarmak için kullanılabilecek bir desenle kaplamanıza olanak tanır. Başka bir deyişle, bir görüntünün alfasını temel alarak 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, halihazırda var olan arka plan ve kenarlık görüntüsü özelliklerine benzemektedir.

-webkit-mask (arka plan) -webkit-mask-attachment (arka plan eki) -webkit-mask-clip (arka plan-klip) -webkit-mask-origin (background-origin) -webkit-mask-image (arka plan görüntüsü) -webkit-mask-repeat (arka plan tekrarı) -webkit-mask-composite (arka plan-kompozit) -webkit-mask-box-image (border-image)