前端实现背景虚化但内容清晰且自适应 的实例代码


Posted in HTML / CSS onAugust 01, 2019

讲干货,不??拢?惺焙蚯岸嘶嵊龅奖尘靶榛???竽谌萸逦?男枨螅?瓤葱Ч??/p>

前端实现背景虚化但内容清晰且自适应 的实例代码

以下为具体实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景虚化</title>
</head>
<body>
    <div class="main">
<!--        以下为背景虚化,其他内容清晰-->
<!--        内容层-->
        <div class="banner">
            <div class="banner-contain">
                <h1>我是内容</h1>
            </div>
<!--            背景层-->
            <div class="banner-bg"></div>
        </div>
    </div>
    <style>
        .main{
            width: 100%;
        }
        .banner{
            width: 100%;
            position: relative;
        }
        .banner-bg{
            width: 100%;/*宽度铺满屏幕*/
            padding-top: 52.734%;/*图片高度除以宽度,得到此值*/
            background: url("test.jpg")center center no-repeat;/*两个center分别为水平和垂直方向的对齐方式*/
            background-size: 100%;/*背景水平铺满*/
            filter:blur(10px);/*虚化值,越大越模糊*/
        }
        .banner-contain{
            position: absolute;/*设置内容层绝对定位*/
            width: 100%;
            text-align: center;
            z-index: 6;/*将内容至于上层*/
            margin-top: 6%;
        }
    </style>
</body>
</html>

1.自适应的实现:

设置div标签padding-top为百分比,padding和margin百分比值是依据宽度计算的而非屏幕高度,所以可以依此设置一个自适应的区域,比如图片信息如下

前端实现背景虚化但内容清晰且自适应 的实例代码

那么高宽比例为:540/1024 大概为52.734%,也就是高度为宽度的52.734%,这里宽度设置为100%,那么宽度的padding-top即为52.734%*100%

2.背景虚化内容清晰的实现:

设置两个层,一个是背景虚化层,自适应撑起整个外层div容器,通过filter:blur()属性设置虚化值,另一个为内容层,绝对定位,设置z-index提高内容层层次防止被遮挡,这样内容层不受虚化影响

总结

以上所述是小编给大家介绍的前端实现背景虚化但内容清晰且自适应 的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
深入解读CSS3中transform变换模型的渲染
May 27 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 #HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 #HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 #HTML / CSS
Canvas图片分割效果的实现
Jul 29 #HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 #HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 #HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 #HTML / CSS
You might like
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP new static 和 new self详解
2017/02/19 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python中enumerate函数代码解析
2017/10/31 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
如何获取Python简单for循环索引
2019/11/21 Python
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
信息合作协议书
2014/10/09 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
地球一小时活动总结
2015/02/27 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
学校证明范文
2015/06/24 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电