QML: how to create semi-transparent/ translucent WebView element?

Question

I wonder how to create a WebView element that would be transpalent (like in terms of transparent window...) I try something like:

       Rectangle {
           id: webBrowser
           width: 100; height: 100
           color: "red"
           WebView {
               html: "<style>body,html{background:transparent;background-color: rgba(1,255,0,0.5;)} </style><p>Hello</p>"
             //     preferredWidth: 50
              //    preferredHeight: 50
anchors.fill: parent

           }
       }

but it seems not to help=( What shall I do to make WebView transparent?

Answer 1

You need to set the opacity of the WebView itself, not just the HTML content:

WebView {
   opacity: 0.5;
   html: "<style>body,html{background:transparent;background-color: 
         rgba(1,255,0,0.5;)} </style><p>Hello</p>"
   anchors.fill: parent
   }