您的位置：首页 > Web前端 > > 正文

前端实现一个自适应的正方形（前端实现背景虚化但内容清晰且自适应的实例代码）

更多时间：2021-10-02 01:36:03 类别：Web前端浏览量：2482

前端实现一个自适应的正方形

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

讲干货，不啰嗦，有时候前端会遇到背景虚化但要求内容清晰的需求，先看效果：

以下为具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景虚化</title>
</head>
<body>
    <li class="main">
<!--        以下为背景虚化，其他内容清晰-->
<!--        内容层-->
        <li class="banner">
            <li class="banner-contain">
                <h1>我是内容</h1>
            </li>
<!--            背景层-->
            <li class="banner-bg"></li>
        </li>
    </li>
    <style>
        .main{
            width: 100%;
        }
        .banner{
            width: 100%;
            position: relative;
        }
        .banner-bg{
            width: 100%;/*宽度铺满屏幕*/
            padding-top: 52.734%;/*图片高度除以宽度，得到此值*/
            background: url("test.jpg" alt="前端实现一个自适应的正方形（前端实现背景虚化但内容清晰且自适应 的实例代码）" border="0" />

1.自适应的实现：

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

前端实现一个自适应的正方形（前端实现背景虚化但内容清晰且自适应的实例代码）

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

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

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

总结

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

标签：背景虚化内容清晰自适应

上一篇：mysql和mycat半主从复制项目（Linux如何使用 MyCat 实现 MySQL 主从读写分离）

下一篇：html5横向滚动（解决HTML5中滚动到底部的事件问题）

您可能感兴趣

前端实现一个自适应的正方形（前端实现背景虚化但内容清晰且自适应的实例代码）