css 设置背景图片模糊，内容不模糊
生活随笔
收集整理的這篇文章主要介紹了
css 设置背景图片模糊，内容不模糊
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
方案：
內(nèi)容和圖片分別置于一個(gè)div，通過(guò)css設(shè)置背景div模糊度，設(shè)置內(nèi)容div絕對(duì)位置。
<!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">我是內(nèi)容</div></div> </div> </body> </html>效果圖：
總結(jié)
以上是生活随笔為你收集整理的css 设置背景图片模糊，内容不模糊的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 一英里等于多少公里
- 下一篇： 大班语言教案《卡罗尔和她的小猫》反思