CSS设置背景模糊

栏目: CSS · 发布时间: 7年前

内容简介：在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到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;
}
复制代码

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

自品牌

陈为、孙郁婷 / 机械工业出版社 / 2015-9-7 / 39

移动互联网来势汹涌，让品牌重新回到人的时代。微信旗帜鲜明地宣示，“再小的个体也有自己的品牌”。《自品牌：个人如何玩转移动互联网时代》作者历经一年，深度访谈10位嘉宾，挖掘其品牌与商业成功密码。吴晓波、雕爷、罗永浩、鬼脚七、马佳佳……这些商业新浪潮中的探路者与领军者，要么是传统领域的老将，要么是新领域里的先锋，但都能以新媒体为载体，构建个人品牌，打造商业生态，抓住互联网的时代红利，顺风而起，顺势而为......一起来看看《自品牌》这本书的介绍吧!

码农工具

CSS设置背景模糊

自品牌

JSON 在线解析

SHA 加密

UNIX 时间戳转换