您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何仅在CSS中模糊背景图像

如何仅在CSS中模糊背景图像

如果您要应用模糊处理,<html>那么它将模糊您的网页。

而不是要添加背景<html>,您需要创建另一个<div><body>同尺寸该网页,并添加模糊处理它。

body {

  font-family: "Arial";

  color: #fff;

}



.page-bg {

  background: url('http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg');

  -webkit-filter: blur(5px);

  -moz-filter: blur(5px);

  -o-filter: blur(5px);

  -ms-filter: blur(5px);

  filter: blur(5px);

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: -1;

}


<h1>

This is a title

</h1>



<div class="page-bg">

</div>
CSS 2022/1/1 18:14:06 有551人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶