Я хочу иметь изображение, которое загружается из моей базы данных, и, кроме того, тот же самый размер в той же позиции является холстом HTML5.
Большинство решений, которые я нашел, я использовал JQuery/JavaScript, однако я хочу, чтобы подобное решение было возможно только с использованием CSS3, поскольку изображения выводятся из базы данных, и на странице может быть более одного изображения и каждое изображение будет иметь холст.
Как я могу это достичь?
Да.
Вы можете сделать это полностью в 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);
}
В зависимости от количества изображений в базе данных у вас может быть отдельный идентификатор canvas для каждого с именем файла изображения (например, canvas #foo { background:url(foo.jpg) }). Я бы загрузил это в отдельную таблицу стилей.:)
Возможно, было бы проще поддерживать Javascript-решение, хотя если ваша база данных динамична. Достаточно нескольких строк javascript, вместо постоянного обновления таблицы стилей с новыми именами. Меньшая ошибка, также подверженная ошибкам.