Question: I am using Vuetify to build a widget, which is embedded into another website like so:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="component-styles.css">
  </head>
  <body>
    <div style="height: 3000px; background-color: pink; opacity: 0.5;"></div>
    <vue-widget style="position: fixed; bottom:0; right: 0; left: 0; z-index: 1000;"></vue-widget>
    <script src="component.js"></script>
  </body>
</html>

```

This is what index.html looks like:

[![enter image description here](https://i.stack.imgur.com/2nUal.png)](https://i.stack.imgur.com/2nUal.png)

How can I modify my Vue widget to allow the pink div to show through it's background, while keeping the button opaque?

Answer: 
I solved this by adding `style=" background: transparent;"` to my element in App.vue.
How about setting the css opacity

```
<vue-widget style="position: fixed; bottom:0; right: 0; left: 0; z-index: 1000;opacity: 0.5">

```