title: CSS opacity ignored on Edge Mobile, but honored on other mobile and desktop browsers
body: <p>The image is from another domain, but I can't find anything to indicate that that is the issue. I am going for an effect where it looks like an image is a watermark on parchment behind the text, and I can't directly alter the watermark image so it has to be done in CSS. The only browser that doesn't work is Microft's Edge on Mobile. Chrome mobile, and all desktop browsers I tried worked just fine.</p>
  
  <pre><code>@font-face {
      font-family: 'Domestic Manners';
      src: url('domestic-manners.regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }
  
  * {
      font-family: "Domestic Manners";
      position: relative;
  }
  
  p {
      font-size:120%;
      text-indent: 2em;
      padding: 0;
      margin: 0;
      clear: both;
      /* float:left; */
  }
  
  #main {
      margin:auto;
      max-width: 700px;
      padding:3em;
      background-image: url(/img/parchment-full.jpg);
      border-radius:5px;
      z-index: 0;
      overflow: hidden;
  }
  
  .images img {
      height: 60;
      /* filter: grayscale(1) sepia(1) brightness(1.3); */
      margin: 0;
      padding: 0;
      float: left;
      /* To generate the dice images you can use the following js and then right click and save as the image */
      /* for (var i =10; i&gt;=0; i--){place_dice("d10", i);} */
  }
  
  .creature {
      position: absolute;
      left: 50%;
      z-index:-1;
      transform: translate(-50%, 0);
      opacity:25%;
  }
  </code></pre>
  
  <p>I removed the CSS that I'm 99% sure doesn't apply to make it easier to understand.
  The HTML this is applying to is bellow. Note that the image tag is within the p.</p>
  
  <pre><code>&lt;div id="main"&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
    &lt;p&gt;&lt;img class="creature" src="https://image-from-a-different-origin"/&gt;
      Lorem Ipsum...
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>