900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > css背景图不失真_CSS实现页面背景图片模糊内容不模糊的方法

css背景图不失真_CSS实现页面背景图片模糊内容不模糊的方法

时间:2021-03-30 11:46:40

相关推荐

css背景图不失真_CSS实现页面背景图片模糊内容不模糊的方法

CSS实现页面背景图片模糊内容不模糊的方法,如果对你有帮助就看看吧,挺实用的一个CSS背景模糊效果,适合做一些非常唯美的网页,给人一种很模糊却又带着一丝清晰的感觉。

代码:

Document

.banner_bg{

background:url(/1122953495707.jpg);

width:1000px;

background-repeat:no-repeat;

background-size:cover;

-webkit-filter:blur(15px);

-moz-filter:blur(15px);

-o-filter:blur(15px);

-ms-filter:blur(15px);

filter:blur(15px);

position:absolute;

left:0;

top:0;

height: 500px;

}

.swiper-container{

position: relative;

top:200px;

left: 300px;

color: white;

font-size: 36px;

font-weight: 700;

text-shadow: 0 2px 20px rgba(0, 0, 0, .1);

}

这里面是清晰的内容

如果觉得我的文章对你有用,请随意赞赏

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开或者扫一扫,即可进行扫码赞赏哦

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