Αλλαγή χρώματος εικόνας PNG μέσω CSS;

Question

Περισσότερα

Πηγή Μη AMP-έκδοση Επεξεργασία

Αλλαγή χρώματος εικόνας PNG μέσω CSS;

Δεδομένου ενός διαφανούς PNG που εμφανίζει ένα απλό σχήμα σε λευκό χρώμα, είναι δυνατόν να αλλάξετε με κάποιο τρόπο το χρώμα του μέσω CSS; Κάποιο είδος επικάλυψης ή κάτι τέτοιο;

John Slegers

Επεξεργασμένη ερώτηση Κάνε Ιούλιος 2017 в 2:53

Προγραμματισμός

image png overlay css colors

Κάνε Σεπτέμβριος 2011 в 11:53

15 προβολές

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

Ίσως να θέλετε να ρίξετε μια ματιά στις γραμματοσειρές Icon. http://css-tricks.com/examples/IconFont/

EDIT: Χρησιμοποιώ την Font-Awesome στο τελευταίο μου έργο. Μπορείτε ακόμη και να το κάνετε bootstrap. Απλά βάλτε αυτό στο `` σας:

Και στη συνέχεια προχωρήστε και προσθέστε μερικά εικονίδια-συνδέσμους όπως αυτό:

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

Εδώ'είναι το πλήρες εξαπατητικό φύλλο

--edit--

Το Font-Awesome χρησιμοποιεί διαφορετικά ονόματα κλάσεων στη νέα έκδοση, πιθανώς επειδή αυτό κάνει τα αρχεία CSS δραστικά μικρότερα, και για να αποφευχθούν οι διφορούμενες κλάσεις css. Έτσι, τώρα θα πρέπει να χρησιμοποιήσετε: - Το όνομα του χρήστη είναι: "Οπότε, τώρα θα πρέπει να χρησιμοποιήσετε το όνομα του χρήστη:

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

ΕΠΕΞΕΡΓΑΣΊΑ 2:

Μόλις ανακάλυψα ότι το github χρησιμοποιεί επίσης τη δική του γραμματοσειρά εικονιδίων: Octicons Είναι δωρεάν για κατέβασμα. Έχουν επίσης μερικές συμβουλές για το πώς να δημιουργήσετε τις δικές σας γραμματοσειρές εικονιδίων.

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

Kirill G

Πηγή Μη AMP-έκδοση Επεξεργασία

Η ετικέτα img έχει μια ιδιότητα φόντου όπως κάθε άλλη. Αν έχετε ένα λευκό PNG με ένα διαφανές σχήμα, όπως ένα στένσιλ, τότε μπορείτε να το κάνετε αυτό:

24

0

Σχόλια (5)

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

Ναι :)

Surfin' Safari - Αρχείο ιστολογίου » Μάσκες CSS

Το WebKit υποστηρίζει τώρα μάσκες άλφα σε CSS. Οι μάσκες σας επιτρέπουν να επικαλύψετε το περιεχόμενο ενός πλαισίου με ένα μοτίβο που μπορεί να χρησιμοποιηθεί για να εξαλείψει τμήματα αυτού του πλαισίου στην τελική εμφάνιση. Με άλλα λόγια, μπορείτε να κόψετε σε σύνθετα σχήματα με βάση το άλφα μιας εικόνας.
[...] Έχουμε εισαγάγει νέες ιδιότητες για να παρέχουμε στους σχεδιαστές ιστού μεγάλο έλεγχο σε αυτές τις μάσκες και στον τρόπο εφαρμογής τους. Οι νέες ιδιότητες είναι ανάλογες με τις ιδιότητες background και border-image που ήδη υπάρχουν.

-webkit-mask (φόντο) -webkit-mask-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)