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


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 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 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常用函数 推荐收藏保存
2010/02/21 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
php简单压缩css样式示例
2016/09/22 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
js读取cookie方法总结
2014/10/31 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python调用shell的方法
2013/11/20 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
python+opencv实现动态物体识别
2018/01/09 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Python 发送邮件方法总结
2020/08/10 Python
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
英文求职信结束语大全
2013/10/26 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
表扬信范文
2015/05/04 职场文书
永不妥协观后感
2015/06/10 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书