用html实现模糊效果,css实现简单背景模糊的方法（代码示例）

本篇文章给大家带来的内容是介绍css实现简单背景模糊的方法(代码示例)。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

使用filter属性来设置模糊值

效果：

css样式：

.cover {

width: 600px;

height: 300px;

position: relative;

text-align: center;

line-height: 300px;

color: #fff;

margin: 20px auto;

}

.cover::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 600px;

height: 300px;

background: transparent url(Images/picture/5.jpg) center center no-repeat;

filter: blur(8px);

z-index: -1;

background-size: cover;

}

HTML结构：

背景模糊，文字清晰显示