前端开发完成情况虚化但內容清楚且自融入 的案

日期：2021-02-22 类型：科技新闻 

关键词：小程序怎么做，凡科网小程序，微信小程序界面，线上报名小程序，微信小程序页面制作

讲干货，不唠叨，有时前端开发会遇到情况虚化但规定內容清楚的要求，先看实际效果：

下列为实际完成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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百分比值是根据宽度测算的而非显示屏高宽比，因此能够依此设定1个自融入的地区，例如照片信息内容以下

那末高度例为：540/1024 大约为52.734%，也便是高宽比为宽度的52.734%，这里宽度设定为100%，那末宽度的padding-top即为52.734%*100%

2.情况虚化內容清楚的完成：

设定两个层，1个是情况虚化层，自融入撑起全部外层div器皿，根据filter:blur()特性设定虚化值，另外一个为內容层，肯定精准定位，设定z-index提升內容层层级避免被遮挡，这样內容层不会受到虚化危害

总结

以上所述是网编给大伙儿详细介绍的前端开发完成情况虚化但內容清楚且自融入 的案例编码,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：HTML文字特性&amp;色调操纵特性的完成 返回下一篇：没有了