Transparent Background · Magic Leap Web API

Transparency is a Web API which allows developers to display their content on a transparent web page. The page background can be fully or partially transparent depending on the transparency value chosen for background. The transparency value ranges between 0 and 1, with 0 being fully transparent and 1 being fully opaque. CSS property/rules can also be used to control the transparency. Currently this API is only implemented on the Magic Leap Helio browser.

Syntax

Any web page can use this API by including the following meta tag in the html head tags.

<meta name = "viewport" content = "transparent-background">

Example

<!DOCTYPE html>
<html>
  <head>
    <meta name = "viewport" content = "transparent-background">
    <style>
      body { background-color: rgba(255, 255, 0, 0.5); }
      h1   { background-color: rgb(0,255,0); }
    </style>
  </head>

  <body>
    <h1>This is a fully opaque line on 50% transparent background</h1>
  </body>
</html>