css 设置背景图片模糊，内容不模糊

方案：

内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置。

<!DOCTYPE html><html lang="en">
<head><meta charset="utf-8"><style type="text/css">.content {color: #ffffff;font-size: 40px;}.bg {background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2798491980,1963709037&fm=26&gp=0.jpg');height:600px;text-align: center;line-height: 600px;}.bg-blur {float: left;width: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;-webkit-filter: blur(15px);-moz-filter: blur(15px);-o-filter: blur(15px);-ms-filter: blur(15px);filter: blur(15px);}.content-front {position:absolute;left: 10px;right: 10px;height:600px;line-height: 600px;text-align: center;}</style>
</head>
<body><div><div class="bg bg-blur"></div><div class="content content-front">我是内容</div></div>
</div>
</body>
</html>

效果图：

css 设置背景图片模糊，内容不模糊相关推荐

Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
css设置背景图片模糊，文字清晰展示
css设置背景图片模糊,文字清晰展示使用filter: blur来实现,blur的值越大越模糊效果图: html: <div class="box"><p&g ...
html如何把图片在背景图一半,img只显示图片一部分或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
php设置背景图片的代码,css设置背景图片如何实现？（代码实例）
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
php背景图片透明度,css实现背景图片半透明内容不透明代码分享
本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的 ...
background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
html背景图片只显示一张图片,img只显示图片一部分或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
css 设置背景图一半_img只显示图片一部分或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
css设置背景图片模糊，内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置. ...

css 设置背景图片模糊，内容不模糊

css 设置背景图片模糊，内容不模糊相关推荐

最新文章

热门文章