Tôi có thể chuyển đổi hình ảnh sang CSS3 không?

Question

Giả sử rằng tôi có tệp PNG hình ảnh đa giác như thế này (Không có đường viền, hình dạng được tô đầy một màu, không có độ dốc và nền của hình ảnh trong suốt) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF

Tôi đang nghĩ đến việc sử dụng hình đa giác đó dưới dạng hình nền và ảnh sẽ được thay đổi (sang hình ảnh khác có màu khác) khi người dùng di chuột lên đó.

Nhưng tôi cũng muốn màu của hình nền có thể tùy chỉnh được. Vì vậy, tôi nghĩ nếu có khả năng vẽ đa giác thay vì sử dụng tệp hình ảnh sao cho màu sắc sẽ được tùy chỉnh (tôi không nghĩ rằng nên tạo một tệp cho một màu và cứ thế tiếp tục) .

• Giải pháp tốt nhất cho trường hợp này là gì? Sử dụng png hoặc vẽ nó bằng css?
• Có công cụ/trang web nào để chuyển mã png sang mã css của tôi không?

Answer 1

1. Làm cho vùng trắng trong suốt (màu alpha trong GIMP)
2. Convert the image to a data URI (đó là không bắt buộc nhưng nó sẽ làm cho tải trang web của bạn nhanh hơn)
3. Sử dụng các url trong (2) là background-image và sử dụng bất kỳ background-color nào bạn muốn.

Answer 2

Sử dụng tính năng này để chuyển đổi hình ảnh: http://codepen.io/blazeeboy/pen/bCaLE Tôi nghĩ tốt hơn nên sử dụng hình ảnh được chuyển đổi vì trình duyệt tải chúng nhanh hơn.

Answer 3

Tôi nghĩ CSS là điều sai khi sử dụng cho việc này. Vâng, có thể tạo ra nhiều hình dạng bằng cách sử dụng CSS, nhưng có những hạn chế, và trong mọi trường hợp, việc vẽ các hình dạng với CSS là một chút hack, ngay cả khi nó chỉ là một hình tam giác đơn giản.

Thay vì CSS, tôi khuyên SVG là công cụ thích hợp cho công việc này.

SVG là định dạng đồ họa cho đồ họa vector có thể được nhúng vào trang web và có thể được tạo hoặc thay đổi qua Javascript trực tiếp trong trang web. Thay đổi màu sắc và hình dạng của một đa giác đơn giản là dễ dàng như với SVG.

Ưu điểm khác của việc sử dụng SVG là vì đó là đồ họa véc tơ, có thể mở rộng, do đó bạn có thể hiển thị ở mọi kích cỡ.

Chỉ từ phía dưới của SVG là nó không được hỗ trợ bởi các phiên bản cũ của IE (IE8 trở về trước). Tuy nhiên, các trình duyệt này hỗ trợ một ngôn ngữ thay thế được gọi là VML, và một số thư viện Javascript tốt tồn tại mà sẽ làm việc với một trong hai, do đó cho phép bạn hoàn thành khả năng tương thích trình duyệt chéo. Điều tôi muốn giới thiệu là Raphael.js.

Vì vậy, một chút (và rất dễ) chút mã Javascript thay vì một chút lộn xộn của CSS. Có vẻ như một người chiến thắng với tôi.