通过模糊来弱化背景

最新推荐文章于 2022-01-23 10:05:00 发布

weixin_30662109

最新推荐文章于 2022-01-23 10:05:00 发布

阅读量241

点赞数

文章标签：人工智能 python

原文链接：http://www.cnblogs.com/scnuwangjie/p/6053174.html

版权

《css揭秘》中，通过模糊来弱化背景效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <style>
        main {
                transition: .6s;
                background: white;
            }
        main.de-emphasized {
            -webkit-filter: blur(3px);
            filter: blur(3px);
        }
        dialog {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 10em;
            padding: 2em;
            /*margin: -5em;*/
            border: 1px solid silver;
            border-radius: .5em;
            box-shadow: 0 .2em .5em rgba(0, 0, 0, .5),
            0 0 0 100vmax rgba(0, 0, 0, .2);
            transform: translate(-50%, -50%);
        }
        dialog:not([open]) {
            display: none;
        }
        body {
            font: 150%/1.6em Baskerville, Palation, serif;
        }
    </style>
</head>
<body>
<dialog>O HAI, I’m a dialog. Click on me to dismiss.</dialog>
<main>
    <button>Show dialog</button>
    <p>
        Show dialog
        Bacon ipsum dolor sit amet consectetur short loin ut tri-tip alcatra ground round jowl beef meatloaf in pork. Elit chicken ea spare ribs. Shank andouille ex boudin picanha turkey esse. Do doner fugiat tongue.

        Pork chop ad cow spare ribs capicola ball tip alcatra cillum magna short ribs tempor. Pork loin do sint magna ea pork belly duis. Shoulder ullamco chicken porchetta, ham anim veniam venison. Fugiat tenderloin venison, turducken non pork chop ribeye enim. Beef turkey salami, ipsum prosciutto commodo cupidatat. Tri-tip ham hock non brisket pig cupim commodo ball tip nulla turkey kielbasa corned beef flank. Hamburger pariatur ham, porchetta cupidatat sirloin pork loin quis nulla culpa tail esse.

        Chuck filet mignon flank pork chop mollit enim veniam sed pork loin aliquip sausage prosciutto in deserunt. Nostrud porchetta non nulla sunt. Cupim et velit picanha laborum salami capicola exercitation alcatra sausage cillum shoulder minim esse. Pig boudin aliquip aute, tail ut cow incididunt short loin aliqua.

        Et dolor occaecat dolore doner shoulder. Swine pancetta tri-tip irure turducken, kevin est meatball aliqua aute quis ham venison sunt. Consequat pancetta sint beef turkey. Fugiat occaecat commodo, short ribs corned beef aliquip elit eiusmod pork belly ut eu tri-tip. Sint aute picanha proident corned beef ad beef dolore landjaeger. Laboris est deserunt tempor, bresaola ham hock non brisket frankfurter ad leberkas aute sirloin. Minim et ribeye shank pork loin sint corned beef ball tip dolor.

        Doner alcatra pastrami pig, strip steak eu in frankfurter occaecat in filet mignon chuck short loin nulla meatloaf. Adipisicing aliqua kielbasa nulla proident. Ground round meatloaf kevin, shank adipisicing pork frankfurter t-bone spare ribs cupidatat. Sed ham non duis enim, in ipsum fugiat est tongue short ribs ad bresaola prosciutto. Non minim picanha, ad in occaecat fugiat veniam dolor deserunt.
    </p>
</main>

<script>
    function $(sle) {
        return document.querySelector(sle);
    }
    var dialog = $('dialog');
    var main = $('main');
    $('button').onclick = function () {
        dialog.setAttribute('open', '');
        main.classList.add('de-emphasized');
    };
    dialog.onclick = function () {
        if (dialog.close) {
            dialog.close();
        } else {
            dialog.removeAttribute('open');
        }
        main.classList.remove('de-emphasized');
    }

</script>

</body>
</html>

转载于:https://www.cnblogs.com/scnuwangjie/p/6053174.html

weixin_30662109

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过模糊来弱化背景

《css揭秘》中，通过模糊来弱化背景效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&...
复制链接

扫一扫