1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 用html实现模糊效果 css实现简单背景模糊的方法(代码示例)

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

时间:2021-12-24 05:56:25

相关推荐

用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结构:

背景模糊,文字清晰显示

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。