前景水印未在IE 11中显示

Question

下面的CSS适用于FF，Chrome，Edge等大多数浏览器，但在IE 11中不起作用。有人可以帮我吗？

这里是我正在使用的CSS：.watermarked {

   position: relative;

   }

   .watermarked:after {

   content: "";

   display: block;

   width: 100%;

   height: 100%;

   position: absolute;

   top: 0px;

   left: 0px;

  background-image: url('../../../../images/longdraft.png');

   background-size: contain; /* Make background take entire page */

   background-position: center; /* Center Background */

   background-repeat: no-repeat;

   opacity: 0.5;

   }

Answer 1

根据this thread和您的代码，我使用以下代码创建了一个示例，它在IE 11浏览器上运行良好。请检查。

    <style>
        .watermarked {
            position: relative; 
            text-align:center;
        }

            .watermarked:after {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                background-image: url("http://placehold.it/100x100/09f/fff.png");
                /*background-size: 100px 100px;
                background-position: 30px 30px;*/ 
                background-size: contain; /* Make background take entire page */
                background-position: center; /* Center Background */
                background-repeat: no-repeat;
                opacity: 0.5;
            } 
    </style>
    <div class="watermarked">
        <img src="http://placehold.it/500x325.jpg" alt="Photo">
    </div>

这样的输出（IE11浏览器）：

因此，请尝试使用F12开发人员工具来检查相关的CSS样式和HTML元素，是否在IE浏览器中成功加载了图像以及是否应用了CSS样式。如果仍然无法正常工作，则可能是该问题与其他CSS样式有关，您可以发布足够的代码来重现此问题，如Minimal, Complete, and Verifiable example。

此外，您还想添加水印图像。如果要在其他图像上添加水印图像，也可以检查此示例（this link中的代码）：

<style>
    #image {
        /* the image you want to 'watermark' */
        height: 200px;
        /* or whatever, equal to the image you want 'watermarked' */
        width: 200px;
        /* as above */
        background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
        background-position: 0 0;
        background-repeat: no-repeat;
        position: relative;
    }

        #image img {
            /* the actual 'watermark' */
            position: absolute;
            top: 0;
            /* or whatever */
            left: 0;
            height:200px;
            width:200px;
            /* or whatever, position according to taste */
            opacity: 0.5;
            /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
            filter: alpha(opacity=50);
            /* for <= IE 8 */
        }
</style>
<div id="image">
    <img src="http://placehold.it/500x325.jpg" alt="..." />
</div>

IE 11结果：