废话不多说， 开始 正文！
正如标题所言我们今天所要介绍的就是通过css来创建一个模糊的背景图像，适用于你 个人博客 页面，也适用于网站背景。
下面我直接上代码：
<!DOCTY PE ht ML >
<html>
<head>
< ;m eta charset=utf-8 />
<t IT le></title>
<style>
body, html {
h ei ght: 100%;
m arg in: 0;
font-f ami ly: Arial, Helvetica, sans -s erif;
}
* {
box-sizing: border-box;
}
.bg -i mage {
/* 所使用的图像 */
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 -t ext {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight : bold;
border: 3px solid # F1 f1f1;
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 E xp lorer 浏览器(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-ori gin ：规定背景图片的定位区域。 background-clip：规定背景的 绘制 区域。 background-attachment：规定背景图像 是否 固定 或者 随着页面的其余部分滚动。 background-image：规定要使用的背景图像。 inherit：规定应该从父元素继承 background 属性的设置。
PHP中文网平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！
以上就是用CSS快速创建高级模糊感的背景图像的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 用CSS快速创建高级模糊感的背景图像 全部内容，希望文章能够帮你解决 用CSS快速创建高级模糊感的背景图像 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于用CSS快速创建高级模糊感的背景图像的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200126