Ответ 1
Да.
Вы можете сделать это полностью в CSS, но вам нужно будет добавить некоторые конкретные сантехника для каждого изображения.
Если вы когда-нибудь устанете от дополнительной сантехники, javascript может сделать большую часть сантехники для вас.
Вот сценарий версии только для CSS:
http://jsfiddle.net/m1erickson/g3sTL/
HTML:
<div class="outsideWrapper">
<div class="insideWrapper">
<img src="house-icon.jpg" class="coveredImage">
<canvas class="coveringCanvas"></canvas>
</div>
</div>
Конечно, в вашей версии вы заменили бы изображение src своим динамическим вызовом базы данных, чтобы получить изображение.
CSS:
.outsideWrapper{
width:256px; height:256px;
margin:20px 60px;
border:1px solid blue;}
.insideWrapper{
width:100%; height:100%;
position:relative;}
.coveredImage{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
}
.coveringCanvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-color: rgba(255,0,0,.1);
}