how can tint background image has transparent sections?
i have tried using background-blend-mode: multiply background-image , background-color. works great opaque images, not take transparency account, leaving colored square around image.
i using svg images, , switch using <img> instead of backgrounds if necessary.
example: left side goal, right side background-blend-mode: multiply. base image light gray circle, , multiplied red.
edit: created codepen better illustrate problem , have tried. http://codepen.io/anon/pen/qbbbpz has both original image , goal (made in photoshop) on top, examples of have tried below.
edit2: i'm beginning wonder if possible plain html/css. using canvas, maybe shaders, more appropriate? there library out there it?
in webkit (safari, chrome , opera) can use -webkit-mask-image effect.
html:
<div id="blend-mask" class="uielement uibg"></div> css:
#blend-mask { -webkit-mask-image: url("http://i.imgur.com/jljaor5.png"); background-color: #f00; background-blend-mode: multiply; } #goal { background-image: url("http://i.imgur.com/jljaor5.png"); } #pagebg { width: 400px; height: 400px; background-image: url("http://lorempixel.com/g/400/200/"); background-color: rgba(255,0,0,0.25); background-blend-mode: multiply; color: white; text-shadow: 0 0 0.25em black; } .uielement { width: 100px; height: 100px; margin: 25px; display: inline-block; } .uibg { background-size: contain; background-repeat: no-repeat; background-image: url("http://i.imgur.com/rkrjbzh.png"); } example working: http://codepen.io/anon/pen/vonvry
if want make work in firefox check post maybe help:
is there -moz-mask css property, -webkit-mask-image?
as can check using canvas tint, there post maybe can help: http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/
