Javascript 在CSS中使用SVG过滤器在图像上添加文本

我有一些模糊的图像：

HTML:

JS:

---

然后我试着找出哪一个有效：

HTML:

但是我不想更改HTML（既不通过HTML也不通过JS），因为这些图像用于各种页面和各种布局，简单地将图像包装在

DIV

或

SPAN

中很可能会破坏布局，并且需要对每个布局进行额外的调整。只向现有元素添加新属性就可以了

---

因此，问题是：是否有其他方法通过已经使用的CSS或SVG添加覆盖？ 再次链接到

我尝试过类似的方法，但没有找到任何方法使其起作用：

CSS:

和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>

?

创建一个带有问号文本的SVG文件，然后通过feImage过滤器加载该文件。

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; }

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

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

<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>

.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;
}

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

<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>