Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <title>Opacity with v-bind</title> <style> #app > div { position: relative; border: dashed black 1px; width: 200px; height: 100px; background-image: url("img_kangaroo.jpg"); background-size: cover; } #onTop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; z-index: 2; color: white; } </style> </head> <body> <h1>Example: In-line styling</h1> <p>This is an example of in-line styling with Vue (v-bind:style).</p> <p>Drag the range input to change the opacity of the div below.</p> <div id="app"> <p> <input type="range" min="0" max="1" step="0.1" v-model="opacityVal"> {{opacityVal}} (opacity value) </p> <div> <div id="onTop" v-bind:style="{ backgroundColor: 'rgba(99,0,89,'+opacityVal+')' }"> Drag the range input to change opacity here. </div> </div> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const app = Vue.createApp({ data() { return { opacityVal: 0.8 } } }) app.mount('#app') </script> </body> </html>
