Make vue widget background transparent
Question
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:
How can I modify my Vue widget to allow the pink div to show through it's background, while keeping the button opaque?
3 answers
solution1
1 2021-01-27 01:48:44
I solved this by adding style=" background: transparent;"to my element in App.vue.
solution2
0 2021-01-27 01:23:52
How about setting the css opacity
<vue-widget style="position: fixed; bottom:0; right: 0; left: 0; z-index: 1000;opacity: 0.5">
solution3
0 2021-01-27 02:38:51
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);">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.