CSS中怎么使背景有模糊的效果，方法是什么

发布时间：2023-09-22 15:21:23 所属栏目：语言来源：

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

html代码如下

<!DOCT

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

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!