html - 当背景图像中有多层时，如何在 CSS 中仅模糊一层？

Question

我有一个包含多个 image-background 的圆 image - 一个图像和一个渐变。

我只想模糊图像并保持圆圈的边缘清晰。我在我的 HTML 代码中多次使用这张图片，并希望在每张图片中使用不同级别的模糊 - 如下例所示。

我在网上尝试了多种解决方案，但我发现的解决方案都不适合圆边。

Link to Codepen

img {
    width: 1.2em;
    height: 1.2em;
    padding: 0.3em;
    border-radius: 50%;
    border: 1px solid #000000;
    background-image: radial-gradient(#aac0e8, #b9cde5, #dce6f2);
    margin: 0%;
}

.

<div id="natoTarget" class="infoContainer">
    <div class="infoTitle">
        <img id="imgNatoTarget" src="img\nato.svg" alt="Nato Target">
        <label id="labelNatoTarget">NatoTarget</label>
        <label id="labelNatoTargetSize">(2.3 x 2.3)</label>
    </div>
    <div class="parameterContainer">
        <div id="natoDetection" class="parameterLine">
            <img id="iconNatoDetection" class="svgBlur" src="img\nato.svg" alt="Nato Detection">
            <label id="labelNatoDetection" for="inputDetection">Detection: </label>
            <output id="inputNatoDetection" name="outputParameter">33</output>

        </div>
    </div>

    <div class="parameterContainer">
        <div id="natoRecognition" class="parameterLine">
            <img id="iconNatoRecognition" src="img\nato.svg" alt="Nato Recognition">
            <label id="labelNatoRecognition" for="inputRecognition">Recognition: </label>
            <output id="inputNatoRecognition">33</output>
        </div>
    </div>

    <div class="parameterContainer">
        <div id="natoIdentification" class="parameterLine">
            <img id="iconNatoIdentification" src="img\nato.svg" alt="Nato Identification">
            <label id="labeNatolIdentification" for="inputNatoIdentification">Identification: </label>
            <output id="inputNatoIdentification">33</output>
        </div>
    </div>
</div>

例子: .

Answer 1

您必须将图像包裹在容器中并模糊其中的图像并从图像中移除边框。

<div class="blurContainer">
    <img id="iconNatoRecognition" src="/someimage/path.jpg" alt="Nato Recognition">
</div>

CSS:

.parameterContainer .blurContainer {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 50%;
  width: 30.78px;
  height: 30.78px;
  filter: blur(100);
  overflow: hidden;
}

.parameterContainer .blurContainer img {
  filter:  blur(2px);
}

希望能解决您的问题:fiddle: https://jsfiddle.net/r6v9g5un/