CSS设置背景模糊的实现方法

这篇文章主要介绍了CSS设置背景模糊的实现方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

 
 

在做一些页面的时候,为了让页面更好看,我们常常需要设置一些背景图片,但是,当背景图片太过花哨的时候,又会影响我们的主体内容,所以我们就需要用到 filter 属性来设置他的模糊值。

html代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>

但是如果直接在背景图片上使用的话,

1
2
3
4
5
6
7
8
9
10
11
.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;
}

可能会造成下面的这种情况。

CSS设置背景模糊的实现方法

我们会发现背景和主体内容都变糊了。

解决办法:给背景图片增加一个伪元素,将背景图片和 filter 属性设置在伪元素上,具体代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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;
}

CSS设置背景模糊的实现方法

转自:https://www.jb51.net/css/642105.html

CSS设置背景模糊的实现方法

上一篇:v-cloak v-text v-html


下一篇:在ASP.NET 中有哪些数据验证控件(请解释ASP.NET中以什么方式进行数据验证)?