css图片模糊img标

在网页设计中，经常会用到图片展示，而 CSS 中的 img 标签也是一个非常重要的标签，它可以用来展示图片。但是，有时候我们会遇到图片模糊的情况，这是什么原因呢？我们该如何解决呢？

img {
width: 100px;
height: 100px;
filter: blur(1px);
}

图片模糊的原因主要是由于 CSS 中的 filter 属性出现了问题。filter 属性是 CSS3 中新增的一个属性，它可以为 HTML 元素添加模糊、亮度、对比度等效果。其中，模糊效果就是通过 blur() 函数实现的。在上面的代码中，我们使用了 blur(1px) 来为图片添加模糊效果。然而，这里的 1px 被解释为像素值，而图片的真实宽高并没有被指定，因此就会导致图片失真。

为了解决这个问题，我们需要在 img 标签中指定图片的宽高，这样就可以避免出现模糊的情况了。同时，还可以在 CSS 中对图片的宽高进行限制，确保图片不会太大或者太小。

img {
width: 100px;
height: 100px;
filter: blur(1px);
}
img.my-image {
max-width: 100%;
max-height: 100%;
}

将上述代码添加到网页中，就可以避免图片模糊的情况，并且还可以自适应地展示图片。同时，我们还可以在 img 标签中添加 class，通过 CSS 对该 class 进行样式设定，实现更为灵活的图片展示效果。