使用CSS

Question

我有implementation模糊图片：

HTML：

<img width="90" height="90" class="blurry" src="image.jpg">
<svg height="90" width="90" class="blurry">
    <image filter="url(#blur)" xlink:href="image.jpg" src="image.jpg" height="100%" width="100%" />
</svg>
<svg id="svg-blur-effect" style="display:none">
    <filter id="blur">
        <feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
    </filter>
</svg>

CSS：

img.blurry {
  display: block;
  visibility: hidden; /* prevent image displaying non-blurry on IE10+ before browser can be detected */
  -webkit-filter: blur(10px); /* supported in newest webkit */
  -moz-filter: blur(10px); /* possible support for future versions */
  -o-filter: blur(10px); /* possible support for future versions */
  -ms-filter: blur(10px); /* IE10+ */
  filter: blur(10px); /* basic CSS3 definition */
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); /* IE4 - 9; must be last otherwise it may be overriden by CSS blur filter */
}
svg.blurry {
  display:none;
}

.ie img.blurry { display: none; }
.ie svg.blurry { display: block; }
.blurry.visible { visibility: visible; }

JS：

$(function() {
  if (-1 < navigator.userAgent.indexOf('MSIE')
   || -1 < navigator.userAgent.indexOf('Trident/')
   || -1 < navigator.userAgent.indexOf('Edge/')) {
       $('body').addClass('ie');
   }
   $('.blurry').addClass('visible');
})

这适用于所有浏览器（Webkit，FF，IE9 +）。但现在我需要为每个模糊图像添加带问号（？）的叠加层。

首先我尝试通过:after CSS添加它，但它不起作用，因为它不支持图像：

/* does not work */
.blurry:after { content: "?"; ... }

然后我尝试使用add some HTML：

HTML：

<span class="img-wrapper">
  <img width="90" height="90" class="blurry" src="image.jpg">
  <svg height="90" width="90" class="blurry">
      <image filter="url(#blur)" xlink:href="image.jpg" src="image.jpg" height="100%" width="100%" />
  </svg>
  <span class="overlay"></span>
</span>

CSS：

.img-wrapper { display: block; float: left; position: relative; }
.overlay {
  position: absolute;
  display: block;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  background: transparent url('question_mark.png') no-repeat center center;
  background-image: -webkit-linear-gradient(transparent, transparent), url('question_mark.png');
  background-image: linear-gradient(transparent, transparent), url('question_mark.png');
  background-size: contain;
}

但我不想更改HTML （既不通过HTML也不是JS），因为这些图像用于各种页面和各种布局，只需将图像包装在DIV中或SPAN最有可能打破布局，并需要对每个布局进行额外调整。 仅向现有元素添加新属性即可。

所以问题：还有其他方法可以通过已经使用的CSS或SVG添加叠加层吗？ 再次链接到jsFiddle。

我尝试过这样的事情，但没有找到任何办法让它发挥作用：

CSS：

.blurry { filter: blur(10px) url(question_mark.svg); }
.ie .blurry > image { filter: url(#blur) url(#question-mark); }

和HTML：

<img width="90" height="90" class="blurry" src="image.jpg">
<svg height="90" width="90" class="blurry">
    <image filter="url(#blur) url(#question-mark)" xlink:href="image.jpg" src="image.jpg" height="100%" width="100%" />
</svg>
<svg id="svg-blur-effect" style="display:none">
    <filter id="blur">
        <feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
    </filter>
    <text id="question-mark">?</text>
</svg>