Как мне стилизовать img с помощью CSS3

Question

возможно ли изменить цвет фона, например, первый значок этого сайта с CSS3 или CSS-расширениями WebKit?

Я новичок в этом и был бы признателен за помощь. Ссылка или пример были бы великолепны.

Заранее спасибо.

Answer 1

Хотя вы можете стилизовать изображение, но изменение цвета значка невозможно в CSS3, так как для этого требуются режимы наложения.

Этого можно добиться с помощью HTML5 Canvas

// Color

var over  = someCanvas.getContext('2d');

// Icon
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

используйте https://github.com/Phrogz/context-blender для достижения этой цели.

Answer 2

Если изображение значка имеет прозрачный фон, тогда вы можете установить цвет фона CSS позади изображения следующим образом:

background: #c00 url(kombine-iphone-icons.png); /* Puts a red background behind the icon image */

К сожалению, нет ничего в CSS 3 (или любом из расширений CSS WebKit)что позволяет менять цвет изображений.

Answer 3

Попробуйте

img {
  background-color: #FF00FF;
}

Answer 4

Да, вы можете стилизовать изображение с помощью css3. Но что-то подсказывает мне, что ваш вопрос на самом деле более конкретен, чем выглядит ..