CODEWITHSUNDEEP
javascripthtmlcssvue.jsvuetify.js
Ollie
Ollie

Reputation: 664

Make vue widget background transparent

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

<!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

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

Upvotes: 0

Views: 3705

Answers (3)

Alfredo L&#39;huissier
Alfredo L&#39;huissier

Reputation: 877

You can try adding "background-color:rgba(0,0,0,0.1)" where the last number is the opacity of the background, so you can adjust it to your will.

<vue-widget style="position: fixed; bottom:0; right: 0; left: 0; z-index: 1000;background-color:rgba(0,0,0,0.1);">

Upvotes: 0

Ollie
Ollie

Reputation: 664

I solved this by adding style=" background: transparent;" to my element in App.vue.

Upvotes: 1

Fennec
Fennec

Reputation: 1902

How about setting the css opacity

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

Upvotes: 0

Related Questions