在Edge Mobile上忽略了CSS不透明度，但在其他移动和桌面浏览器上却得到了尊重。

Question

图片来自另一个域，但我找不到任何东西表明这是问题所在。我想做的效果是让图片看起来像文字后面的羊皮纸上的水印，我不能直接改变水印图片，所以必须用CSS来完成。唯一不能用的浏览器是Microft的Edge手机版。Chrome手机版，以及我试过的所有桌面浏览器都能正常工作。

@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>=0; i--){place_dice("d10", i);} */
}

.creature {
    position: absolute;
    left: 50%;
    z-index:-1;
    transform: translate(-50%, 0);
    opacity:25%;
}

我去掉了我99%确定不适用的CSS，以使它更容易理解.适用的HTML是bellow。请注意，图片标签是在p.c.内。

<div id="main">
  <h1>Title</h1>
  <p><img class="creature" src="https://image-from-a-different-origin"/>
    Lorem Ipsum...
  </p>
</div>

Answer 1

我想这个问题是由于Edge手机不支持百分比不透明度值造成的。在 这个环节，我们可以看到很多浏览器不支持不透明度百分比值。

你可以改变

opacity:25%;

变成

opacity: calc(25 / 100);

或

opacity: 0.25;

其中有同样的效果。那么在Edge手机上就可以很好的使用。