Czy mogę przekonwertować obraz na CSS3?

Question

Przypuśćmy, że mam plik wielokąt PNG takiego (Brak granicy, kształt jest wypełniona jednym kolorze, bez szoku, a tło obrazu jest przezroczysta) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF

mam na myśli używając tego wielokąta wizerunek jako obraz tła i zostanie zmieniony (na inny obraz o innym kolorze), gdy użytkownik się na nim unieruchomi.

Ale chcę również, aby można dostosować kolor obrazu tła. Zastanawiam się, czy istnieje możliwość narysowania wielokąta zamiast używania plików graficznych, aby można było dostosować kolor (nie sądzę, że dobrym pomysłem jest utworzenie jednego pliku dla jednego koloru i tak dalej) .

• Jakie jest najlepsze rozwiązanie dla tej sprawy? Używając png lub rysując go przez css?
• Czy istnieje narzędzie/witryna internetowa do konwersji mojego kodu png na css?

Answer 1

1. Dodać białe obszary przezroczyste (kolor alfa w GIMP)
2. Convert the image to a data URI (jest to obowiązkowe, ale sprawi, że Twój wczytywać strony szybciej)
3. użyć adresu URL w (2) jako background-image i użyj dowolnych żądanych background-color.

Answer 2

Służy do konwersji obrazu: http://codepen.io/blazeeboy/pen/bCaLE Myślę, że to o wiele lepiej jest użyć przekonwertowane obrazów ponieważ przeglądarki załadować je szybciej.

Answer 3

Myślę, że CSS jest niewłaściwą rzeczą do tego. Tak, możliwe jest tworzenie wielu kształtów za pomocą CSS, ale istnieją ograniczenia, a w każdym razie rysowanie kształtów za pomocą CSS to trochę hack, nawet jeśli jest to prosty trójkąt.

Zamiast CSS sugerowałbym, aby SVG było odpowiednim narzędziem do tej pracy.

SVG to format grafiki wektorowej, który może być osadzony w witrynie i można go utworzyć lub zmienić za pomocą Javascript bezpośrednio na stronie. Zmiana koloru i kształtu prostego wielokąta jest tak samo prosta jak w przypadku SVG.

Inną zaletą korzystania z SVG jest to, że jest to grafika wektorowa, jest skalowalna, więc można ją wyświetlić w dowolnym rozmiarze.

Jedyną wadą SVG jest to, że nie jest ona obsługiwana przez stare wersje IE (IE8 i wcześniejsze). Jednak te przeglądarki obsługują alternatywny język o nazwie VML, a istnieje kilka dobrych bibliotek JavaScript, które będą działać z jednym z nich, umożliwiając pełną kompatybilność z różnymi przeglądarkami. Ten, który polecam, to Raphael.js.

Tak więc malutki (i bardzo łatwy) kawałek kodu JavaScript zamiast bardzo niechlujnego fragmentu CSS. Wydaje mi się, że jestem zwycięzcą.