Published
Edited
May 27, 2020
1 fork
md`# Overlay images`
md`Opacity layer 1`
viewof opacity1 = html`<input type="range" min="0" max="100" value="100"></input>`
viewof opacity2 = html`<input type="range" min="0" max="100" value="50"></input>`
viewof opacity3 = html`<input type="range" min="0" max="100" value="50"></input>`
viewof blendmode = html`<select>
<option value=normal>Normal
<option value=darken>Darken
<option value=lighten>Lighten
<option value=multiply>Multiply
<option value=screen>Screen
<option value=overlay>Overlay
</select>`
md`
<div style="position: relative;">
<img src="${await FileAttachment("Laag 1-rescaled.png").url()}" style="position: absolute; top: 0px; opacity: ${opacity1/100}; mix-blend-mode: ${blendmode};">
<img src="${await FileAttachment("Laag 2-rescaled.png").url()}" style="position: absolute; top: 0px; opacity: ${opacity2/100}; mix-blend-mode: ${blendmode}">
<img src="${await FileAttachment("Laag 3-rescaled.png").url()}" style="opacity: ${opacity3/100}; mix-blend-mode: ${blendmode}">
</div>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
