使用 CSS 实现图像模糊效果?

113次阅读
没有评论

要在网页中实现图像模糊效果,可以使用 CSS 的 filter 属性。下面是一份基本的示例代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Image Blur Example</title>
    <style>
        img {
            filter: blur(5px);
        }
    </style>
</head>
<body>
<h1>Image Blur Example</h1>
<img src="https://www.itshiye.com/wp-content/uploads/2023/03/u37401733781605839500fm253app138sizew931n0fJPEGfmtautomaxorilen2heic2000000.webp.jpg" alt="Example Image">
</body>
</html>

在这个示例中,我们使用 filter: blur(5px) 属性将 img 元素的图像模糊化了。这里的 5px 值表示模糊程度。可以通过更改此值来控制模糊程度。

在实际应用中,我们可能需要根据情况使用其他 CSS 属性来修饰图片,例如设置宽度、高度、边框、背景等。

需要注意的是,使用 filter 属性可能会降低网页的性能。为了避免这种情况,我们可以使用 JavaScript 代替 CSS 进行图像模糊处理。

 

 

正文完
 
评论(没有评论)