成为VIP
想让你的网页页面显得高级感十足吗？想要提高你网页的阅读访问量吗？想让你的用户一眼就被你的页面吸引住吗？那么就不要错过本文啦！毕竟简单又快速的实现高级感模糊的背景图，谁都可以学会！
废话不多说，开始正文！
正如标题所言我们今天所要介绍的就是通过css来创建一个模糊的背景图像，适用于你个人博客页面，也适用于网站背景。
下面我直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
/* 所使用的图像 */
background-image: url("001.jpg");
/* 添加模糊效果 */
filter: blur(8px);
-webkit-filter: blur(8px);
/* 完整的高度 */
height: 100%;
/* 中心和缩放图像*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 将文本放置在页面/图像的中间 */
.bg-text {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
<h2>欢迎来到</h2>
<h1 style="font-size:50px">虚拟现实</h1>
<p>一切都是虚拟的，但感觉还是真实</p>
</div>
</body>
</html>
效果如下图所示：
（背景图来源于网络，侵删歉）
怎么样！效果是不是很棒！
那么在上述代码中，给大家介绍几个关键的css属性：
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
注： 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 “filter” 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。
transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
border简写属性在一个声明设置所有的边框属性。
border-width：规定边框的宽度。 border-style：规定边框的样式。 border-color：规定边框的颜色。 inherit：规定应该从父元素继承 border 属性的设置。
background简写属性在一个声明中设置所有的背景属性。
background-color：规定要使用的背景颜色。 background-position：规定背景图像的位置。 background-size：规定背景图片的尺寸。 background-repeat：规定如何重复背景图像。 background-origin：规定背景图片的定位区域。 background-clip：规定背景的绘制区域。 background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。 background-image：规定要使用的背景图像。 inherit：规定应该从父元素继承 background 属性的设置。
PHP中文网平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！
以上就是用CSS快速创建高级模糊感的背景图像的详细内容，更多请关注亿码酷站其它相关文章！
用CSS快速创建高级模糊感的背景图像
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除
转载请注明来源：用CSS快速创建高级模糊感的背景图像
本文永久链接地址：https://www.ymkuzhan.com/38780.html
本文永久链接地址：https://www.ymkuzhan.com/38780.html
下载声明：
本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压； 本站资源来源于用户分享、互换、购买以及网络收集等渠道，本站不提供任何技术服务及有偿服务，资源仅提供给大家学习研究请勿作它用。 赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持，如果你喜欢该程序，请购买正版! 版权声明：
下载本站资源学习研究的默认同意本站【版权声明】若本站提供的资源侵犯到你的权益，请提交版权证明文件至邮箱ymkuzhan#126.com(将#替换为@)站长将会在三个工作日内为您删除。 免责声明：
您好，本站所有资源(包括但不限于：源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来，并未取得原始权利人授权，因此禁止一切商用行为，仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除，一切因下载人使用所引起的法律相关责任，包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读，理解、同意以上内容，如对以上内容持有异议，请勿下载，谢谢配合！支持正版，人人有责，如不慎对您的合法权益构成侵犯，请联系我们对相应内容进行删除，谢谢！
