Могу ли я преобразовать изображение в CSS3?

Предположим, что у меня есть PNG-файл изображения многоугольника, подобный этому (без границы, форма заполнена одним цветом, без градиента, а фон изображения прозрачен) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF

Я думаю об использовании этого изображения многоугольника в качестве фонового изображения, и оно будет изменено (на другое изображение с другим цветом), когда пользователь наведет на него курсор.

Но я также хочу, чтобы цвет фонового изображения можно было настраивать. Итак, я думаю, есть ли возможность рисовать многоугольник вместо использования файлов изображений, чтобы цвет можно было настраивать (я не думаю, что это хорошая идея — создавать один файл для одного цвета и т. д. и т. д.) .

  • Какое лучшее решение для этого случая? Использование png или рисование с помощью css?
  • Есть ли инструмент/веб-сайт для преобразования моего кода png в код css?

css background-image polygons
person Atthapon Junpun-eak    schedule 11.08.2013    source источник

Ответы (4)


arrow_upward
9
arrow_downward

  1. Сделайте белые области прозрачными (цвет в альфа-канале в GIMP).
  2. Преобразуйте изображение в URI данных (это необязательно, но это ускорит загрузку вашего сайта)
  3. Используйте URL-адрес в (2) как background-image и используйте любой background-color, который вы хотите.
person Nabil Kadimi    schedule 11.08.2013
comment
Я попробовал ваш способ и установил цвет фона на красный, но это не сработало. Смотрите мой jsfiddle. jsfiddle.net/K44mE/499 Как изменить серый многоугольник, например, на красный полигон? - person Atthapon Junpun-eak; 11.08.2013
comment
И ваш код (даже если он немного трудночитаемый) делает то, что вы от него ожидаете, вы добавляете background-color только при наведении (:hover) - person Nabil Kadimi; 11.08.2013
comment
Спасибо, но я имею в виду изменить сам серый многоугольник на красный многоугольник. Не менять его фон на красный. - person Atthapon Junpun-eak; 11.08.2013
comment
Сделайте форму многоугольника прозрачной, а окружающее пространство — ровным, а не наоборот. - person Nabil Kadimi; 11.08.2013
comment
Я вижу вашу точку зрения. Но это означает, что родительский фон должен быть постоянно «белым» (в данном случае). Что, если мне нужно, чтобы родительский фон тоже можно было настраивать? Значит, это компромисс? - person Atthapon Junpun-eak; 11.08.2013
comment
Спасибо, Набиль, наконец-то я решил воспользоваться вашим решением. Это самый простой способ, и он работает в кроссбраузерном режиме. - person Atthapon Junpun-eak; 11.08.2013

arrow_upward
4
arrow_downward

Используйте это для преобразования изображения: http://codepen.io/blazeeboy/pen/bCaLE Я думаю, что гораздо лучше используйте преобразованные изображения, потому что браузеры загружают их быстрее.

person Ugnius Malūkas    schedule 11.08.2013
comment
Спасибо за инструмент. Хотя мне это полезно. Однако мне все еще нужно генерировать 1 изображение на 1 цвет? - person Atthapon Junpun-eak; 11.08.2013
comment
Я хотел бы сделать только одну фигуру в качестве фонового изображения и просто изменить ее цвет при наведении курсора. Является ли это возможным? - person Atthapon Junpun-eak; 11.08.2013
comment
Если я правильно понял вопрос, у вас есть несколько вариантов сделать это: 1. Используйте JS, чтобы изменить цвет вашего изображения, которое вы хотите. 2. Сделайте два изображения, а затем измените их, когда будет сделано какое-то движение. 3. Создайте спрайт и манипулируйте им. ... Это на самом деле ваш выбор, что делать :) - person Ugnius Malūkas; 11.08.2013
comment
Можем ли мы изменить цвет изображения с помощью javascript? Я никогда не знал этого раньше. У вас есть примеры в сети? - person Atthapon Junpun-eak; 12.08.2013
comment
Я нашел пример stackoverflow.com/questions/9303757/ - person Ugnius Malūkas; 12.08.2013

arrow_upward
2
arrow_downward

Я думаю, что CSS не подходит для этого. Да, с помощью CSS можно создать много фигур, но есть ограничения, и в любом случае рисовать фигуры с помощью CSS — это немного хитро, даже если это простой треугольник.

Вместо CSS я бы предложил SVG как подходящий инструмент для этой работы.

SVG — это графический формат векторной графики, который можно встраивать в сайт, а также создавать или изменять с помощью Javascript непосредственно на сайте. Изменить цвет и форму простого многоугольника так же просто, как и с SVG.

Другое преимущество использования SVG заключается в том, что поскольку это векторная графика, ее можно масштабировать, поэтому вы можете отображать ее в любом размере.

Единственным недостатком SVG является то, что он не поддерживается старыми версиями IE (IE8 и более ранние версии). Однако эти браузеры поддерживают альтернативный язык, называемый VML, и существует несколько хороших библиотек Javascript, которые будут работать с любым из них, что обеспечивает полную кросс-браузерную совместимость. Я бы рекомендовал использовать Raphael.js.

Итак, крошечный (и очень простой) фрагмент кода Javascript вместо очень грязного фрагмента CSS. Мне кажется победителем.

person Spudley    schedule 11.08.2013
comment
Спасибо, что поделились отличной идеей. Тем не менее, я чувствую, что мы делаем слишком сложную вещь для такой маленькой вещи. Я просто хотел бы сделать кнопку в виде многоугольника и изменить ее цвет при наведении на нее. но я не хочу создавать новое изображение для каждого зависающего цвета, который я хочу иметь. Есть ли другой способ? - person Atthapon Junpun-eak; 11.08.2013

arrow_upward
1
arrow_downward

Возможно, вы могли бы использовать это: https://javier.xyz/img2css/, принцип заключается в использовании box-shadow , это нормально, если изображение маленькое, поэтому вам следует подумать о производительности

person Rumeng Li    schedule 19.02.2019