Nakładka na płótno HTML5 nad zdjęciem

Chcę mieć obraz, który jest przesłany z mojej bazy danych, a na jego wierzchu dokładnie taki sam rozmiar w tej samej pozycji to płótno HTML5.Nakładka na płótno HTML5 nad zdjęciem

Większość znalezionych przeze mnie rozwiązań używam JQuery/JavaScript, jednak jeśli to możliwe, potrzebuję podobnego rozwiązania, po prostu używając CSS3, ponieważ obrazy są wyprowadzane z bazy danych i na stronie może być więcej niż jeden obraz a każdy obraz będzie miał płótno.

Jak mogę to osiągnąć?

Źródło

2013-02-12 Colin747

Tak.

Możesz to zrobić całkowicie w CSS, ale będziesz musiał dodać trochę kodu HTML dla każdego obrazu.

Jeśli kiedykolwiek zmęczy cię dodatkowa hydraulika, javascript może zrobić dla ciebie większość instalacji hydraulicznych.

Oto Fiddle wersji CSS-only:

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>

oczywiście w swojej wersji, to zastąpi src obrazu ze swoim dynamicznym wywołanie bazy danych w celu pobrania obrazu.

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

Źródło

2013-02-12 23:37:56 markE

Czy istnieje sposób, aby to działało na liście obrazów bez znajomości rozmiary obrazu z góry? Usunięcie szerokości/wysokości z zewnętrznej banderoli powoduje, że wszystkie obrazy i płótna we wszystkich tych podwójnych opakowaniach div są renderowane w jednym miejscu. – TheAtomicOption

Wyliczyłem to. Używam Flask, aby Python mógł odczytać wymiary obrazu, a Jinja może ustawić styl śródliniowy dla elementów divWWWWD równym wymiarom. – TheAtomicOption

Possible duplicate.

W zależności od tego, ile zdjęć znajduje się w bazie danych, dla każdego z nich można podać oddzielny identyfikator obszaru roboczego z nazwą pliku obrazu (np. canvas #foo { background:url(foo.jpg) }). Załadowałbym to w osobnym arkuszu stylów. :)

Prawdopodobnie byłoby łatwiejsze w utrzymaniu rozwiązania JavaScript, gdyby baza danych była dynamiczna. Wystarczy kilka linii javascript zamiast ciągłego aktualizowania arkusza stylów o nowych nazwach. Mniej ~~błąd~~ literówka podatna również.

Źródło

2013-02-12 22:32:12

Nakładka na płótno HTML5 nad zdjęciem

Odpowiedz

Powiązane problemy