首页 > 代码库 > css 背景图片虚化效果

css 背景图片虚化效果

2024-09-21 07:18:00   218人阅读

转载地址：http://blog.csdn.net/ohehehou/article/details/51975539

需求：一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。

原始代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <style type="text/css">        .content {            color: #ffffff;            font-size: 40px;        }        .bg {            background: url(‘1.jpg‘);            background-repeat: no-repeat;            background-position: center;            background-size: cover;            height:600px;            text-align: center;            line-height: 600px;        }    </style></head><body><div class="bg">    <div class="content">我是内容</div></div></body></html>

原始效果： 

技术分享

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

html代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <style type="text/css">        .content {            color: #ffffff;            font-size: 40px;        }        .bg {            background: url(‘1.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 背景图片虚化效果


联系
我们