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

Question

图片来自另一个域，但我找不到任何迹象表明这是问题所在。我想要一种效果，它看起来像图像是文本后面羊皮纸上的水印，我不能直接改变水印图像，所以必须在 CSS 中完成。唯一不起作用的浏览器是 Microft 的 Edge on Mobile。 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 这适用于下面。请注意，图片标签在 p.

内

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

Answer 1

我认为问题是由于 Edge 移动版不支持不透明度百分比值引起的。在 this link 中，我们可以看到许多浏览器不支持百分比不透明度值。

你可以改变

opacity:25%;

进入

opacity: calc(25 / 100);

或

opacity: 0.25;

效果相同。那么在Edge mobile上就可以正常使用了。

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

CSS opacity ignored on Edge Mobile, but honored on other mobile and desktop browsers

css

opacity

microsoft-edge