<!DOCTYPE html>
<title>CSS Backdrop Filters Animation: Opacity</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="backdrop-filters-opacity-ref.html">
<style>
    /* Note that per the spec, the backdrop image is read back, filters
       are applied, any additional content is drawn, and then the resulting
       image is composited back into the parent (over the top of the
       existing backdrop image) using source-over compositing. In this case,
       the only backdrop filter is opacity, so the backdrop image will be
       filtered by opacity 50%, the green box (100% opacity) is drawn over
       that at 100% opacity, and then the entire thing is composited into
       the backdrop, which already contains the 100% opacity blue square.
       So the blue square stays 100% blue. */
    .square {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 100px;
        left: 100px;
        background: blue;
    }
    .filt {
        backdrop-filter: opacity(50%);
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 50px;
    }
    .greenbox {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 75px;
        left: 75px;
        background: green;
    }
</style>
<p>You should see a blue square with a green box inside.</p>
<div class="square"></div>
<div class="filt">
    <div class="greenbox"></div>
</div>