css 设置背景图片模糊,内容不模糊

mm2015 2021-11-19 原文


css 设置背景图片模糊,内容不模糊


需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。

原始代码:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {
            color: #ffffff;
            font-size: 40px;
        }
        .bg {
            background: url(\'1.jpg\');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            height:600px;
            text-align: center;
            line-height: 600px;
        }
    </style>
</head>
<body>
<div class="bg">
    <div class="content">我是内容</div>
</div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

原始效果:
这里写图片描述

解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置。

html代码:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {
            color: #ffffff;
            font-size: 40px;
        }
        .bg {
            background: url(\'1.jpg\');
            height:600px;
            text-align: center;
            line-height: 600px;
        }
        .bg-blur {
            float: left;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            -webkit-filter: blur(15px);
            -moz-filter: blur(15px);
            -o-filter: blur(15px);
            -ms-filter: blur(15px);
            filter: blur(15px);
        }
        .content-front {
          position:absolute;
          left: 10px;
          right: 10px;
          height:600px;
          line-height: 600px;
          text-align: center;
        }

    </style>
</head>
<body>
    <div>
        <div class="bg bg-blur"></div>
        <div class="content content-front">我是内容</div>
    </div>
</div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

效果:
这里写图片描述

posted on
2016-10-25 09:24 
舞纷菲 
阅读(10832
评论(1
编辑 
收藏 
举报

 

版权声明:本文为mm2015原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/mm2015/p/5995447.html

css 设置背景图片模糊,内容不模糊的更多相关文章

  1. html/css(2)

    今天我跟大家说一下html,html里面其实什么东西都可以放进去的。首先创建一个文本,改变他的后缀名为html […]...

  2. PHP清除html格式,去除html、css、js格式-函数代码

    strip_tags($str) 去掉 HTML 及 PHP 的标记 语法: string strip_tag […]...

  3. vue-cli环境配置

    1.安装npm 从node.js官网下载并安装node node -v 命令,查看node的版本,若出现相应的 […]...

  4. Python 【第七章】:Html 和 CSS

    HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维 […]...

  5. 【前端工具】Chrome 扩展程序的开发与发布 — 手把手教你开发扩展程序

    关于 chrome 扩展的文章,很久之前也写过一篇。清除页面广告?身为前端,自己做一款简易的chrome扩展吧 […]...

  6. 基于px2rpx-loader,探讨一下loader的封装思想

    本文以px2rpx-loader的源码为学习对象,了解其工作机制以及loader封装的思想。 1.前言 最近在 […]...

  7. 页面图片间隙

    三种解决方法: 1.设置body{font-size:0;},body下用大div包起来所有内容,给设置一个你 […]...

  8. 深入理解CSS系列(一):理解CSS的盒子模型

    深入理解CSS系列(一):理解CSS的盒子模型 接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是 […]...

随机推荐

  1. java四种数组排序

    数组的四种排序 1.快速排序法Arrays.sort(); 2.冒泡排序法 1 int a[]={49,38, […]...

  2. java生成图片验证码

    介绍 验证码的目的是为了防范恶意攻击,如在发送手机短信之前校验验证码,可以防止短信接口被恶意调用导致的金钱损失 […]...

  3. nginx单机1w并发优化

    目录 ab工具整体优化思路具体的优化思路编写脚本完成并发优化配置性能统计工具tips总结 ab工具 ab -c […]...

  4. 异常“itunes无法连接iphone 因为收到来自此设备的无效响应”的解决办法 – z计划

    异常“itunes无法连接iphone 因为收到来自此设备的无效响应”的解决办法 删除电脑上以下位置的Lock […]...

  5. 【solr】Solr5.5.4单机部署

    Solr5.5.4单机部署   Solr5和Solr4有很大区别,最为明显的就是Solr5已经可以独立部署,从 […]...

  6. SCI论文

    据说科研圈一直流传着一套“自我介绍模板”,有了它,随便去哪个985、211双一流高校面试,只要你有胆,敢说厉害 […]...

  7. Java_AOP原理

    Java_AOP原理 AOP : 面向切面编程 在程序设计中,我们需要满足高耦合低内聚,所以编程需满足六大原则 […]...

  8. JavaScript 练习题

    本文是锻炼编程逻辑思维的一些题的归纳,红色字体是个人认为初学比较难懂的题。 1.日期计算器:用户输入年月日,计 […]...

展开目录

目录导航