Yerleşimi HTML5 resmi görüntünün üzerine getir

Question

Veritabanımdan yüklenen bir görüntüye sahip olmak istiyorum ve üstelik aynı konumda aynı boyutta bir HTML5 kanvas var.

Bulduğum çözümlerin birçoğu JQuery/JavaScript kullanıyordum, ancak eğer mümkünse benzer bir çözüm istiyorum eğer sadece CSS3 kullanarak bir veri tabanından çıktılarsa ve bu sayfada birden fazla resim olabilir ve her görüntüde bir tuval olacak.

Bunu nasıl başarabilirim?

Answer 1

Evet.

Bunu tamamen CSS'de yapabilirsiniz, ancak her görüntü için belirli bir HTML sıhhi tesisat eklemeniz gerekir.

Fazladan sıhhi tesisattan sıkılırsanız, javascript sizin için sıhhi tesisatın çoğunu yapabilir.

http://jsfiddle.net/m1erickson/g3sTL/

HTML:

Tabii

<div class="outsideWrapper"> 
    <div class="insideWrapper"> 
     <img src="house-icon.jpg" class="coveredImage"> 
     <canvas class="coveringCanvas"></canvas> 
    </div> 
</div> 

, sürümünüzdeki, dinamik ile görüntü src yerini alacak Burada

CSS okunur sürümün Fiddle olduğunu görüntüyü almak için veritabanı çağrısı.

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); 
} 

Answer 2

Possible duplicate.

Veritabanında kaç görüntü olduğuna bağlı olarak, her biri için görüntü dosyasının adıyla birlikte ayrı bir tuval kimliği (ör. canvas #foo { background:url(foo.jpg) }) olabilir. Bunu ayrı bir stil sayfasında yüklerdim. Veritabanınız dinamik olsa, Javascript çözümünü sürdürmek muhtemelen daha kolay olacaktır. Bir stil sayfasını yeni isimlerle sürekli olarak güncellemek yerine birkaç satır javascript yeterli olacaktır. Daha az hatası yazım hatası.