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;
}
复制代码

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

查看所有标签

猜你喜欢:

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

码农书籍

改变未来的九大算法

[美] 约翰.麦考密克 / 管策 / 中信出版社 / 2013-6 / 39.00元

Google得出的搜索结果是如何产生的？百度为何会陷入“搜索门”，又是什么机制使然？身处在大数据时代的我们，究竟该如何应对变化莫测的世界？ …… 没有满篇的专业术语，第一次让我们通过简单明了的语言、生动的例证了解支撑计算机王国的灵魂支柱——9大算法，包括人工智能、数据压缩，以及Google著名的PageRank等。本书精彩地介绍了搜索引擎、PageRank、公开......一起来看看《改变未来的九大算法》这本书的介绍吧!

码农工具

CSS设置背景模糊

改变未来的九大算法

RGB转16进制工具

MD5 加密

HEX CMYK 转换工具