内容简介：在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到html代码如下但是如果直接在背景图片上使用的话，
在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到 filter 属性来设置他的模糊值。
html代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="cover"> <h1>我是需要突出显示的内容 </div> </body> </html> 复制代码
但是如果直接在背景图片上使用的话，
.cover{
width:600px;
height:300px;
position:relative;
text-align:center;
line-height:300px;
color:white;
background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat;
filter:blur(5px);
background-size:cover;
}
复制代码
可能会造成下面的这种情况。
我们会发现背景和主体内容都变糊了。
解决办法：给背景图片增加一个伪元素，将背景图片和 filter 属性设置在伪元素上，具体代码如下
.cover{
width:600px;
height:300px;
position:relative;
text-align:center;
line-height:300px;
color:white;
}
.cover::before{
content:'';
position:absolute;
top:0;
left:0;
width:600px;
height:300px;
background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat;
filter:blur(5px);
z-index:-1;
background-size:cover;
}
复制代码
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- Vue-cli中为单独页面设置背景色的实现方法
- css去掉table的td单元格的间距cellspacing，设置隔行显示不同背景颜色
- text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩
- 根据 轮播图背景色 自动填充剩余背景色的 走马灯
- 大图背景悬停导航菜单
- 标题带背景图片的表格
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Series 60 应用程序开发
巴克 / 人民邮电出版社 / 2005-7 / 75.0
Series 60智能手机开发平台正掀起新一轮的移动服务浪潮。超过60％的手机生产商获得了Series 60平台的授权。Series 60移动应用开发平台拥有最大的用户群，从而成为智能手机市场的代表。诺基亚与EMCC软件公司合作，为C++程序员和软件设计师编撰了这本Series 60开发的权威指南。本书由诺基亚资深专家进行了全面审阅。本书内容涉及了开发过程的各个阶段，从设计、编程、测试、调试到部署......一起来看看 《Series 60 应用程序开发》 这本书的介绍吧!
