如何模糊除列表项之外的整个身体？

Question

我想创建一种效果，使整个身体变得模糊或变暗，并且只有特定的列表项显得清晰。 但是，当我将 z-index 设置为列表项时，它不起作用。 当我设置整个无序列表的 z-index 时，它可以工作，但所有列表项都显示清晰（我不想要）。

让我向您展示我的 html 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ashish Toppo</title>
    <link href="https://fonts.googleapis.com/css?family=Oxanium&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body >
    <!-- the html for the top bar starts here -->
    <div class="top_bar" id="topBar">
        <div class="logo_name" id="logoName">Ashish Toppo</div>
        <ul class="menu">
            <li class="menu_items currently_active_menuItem" id="home">home</li>
            <li class="menu_items" id="about">about</li>
            <li class="menu_items" id="education">education</li>
        </ul>
    </div>
    <!-- the html for the top bar ends here -->

    <!-- the html for the intro starts here -->
    <div class="intro" id="intro">
        <div class="profile_pic" id="profilePic">
            <img id="profileImg" src="images/ashish-toppo-green.jpg" width="100%" height="100%" alt="a picture of mine">
        </div>
        <div class="intro_box" id="introBox">
                <!-- some introduction text here -->
                <center id="aboutPointer">To know more about me, go to the about section!</center>
        </div>

    </div>
    <!-- the html for the intro ends here -->


<script src="js/uiversal.js"></script>
<script src="js/index.js"></script>
</body>
</html>

现在，通用 javaScript 文件：

/* this is a reusable js file universal to all web pages */
/* Ashish Toppo */
"use strict";
function get(id_or_class){
    var obj = {
        element: ( document.getElementById(id_or_class) ) ? document.getElementById(id_or_class) :
                 ( document.getElementsByClassName(id_or_class) ) ? document.getElementsByClassName(id_or_class) : 
                 ( document.querySelector(id_or_class) ) ? document.querySelector(id_or_class) : 
                 console.error("The provided HTML element could not be found"),
        html: () => { return obj.element; },
        changeText: (text) => { obj.html().innerHTML = text; },
        appendText: (text) => { 
            let appendOn = obj.html().innerHTML;
            obj.html().innerHTML = appendOn + text;
        },
        previousDisplayMode: "block",
        hide: () => {
            obj.previousDisplayMode = obj.html().style.display;
            obj.html().style.display = "none"; 
        },
        show: () => { 
            obj.html().style.display = obj.previousDisplayMode;
        },
        on: (event, callBack) => {
            obj.html().addEventListener(event, callBack);
        },
        previousZIndex: 1,
        focusOn: () => {
            let blur = document.createElement("div");
            blur.className = "theDivThatBlurs";
            blur.style.width ="100vw";
            blur.style.height ="100vh";
            blur.style.display ="block";
            blur.style.position ="fixed";
            blur.style.top ="0";
            blur.style.left ="0";
            blur.style.zIndex ="9";
            blur.style.backgroundColor ="rgba(0, 0, 0, 0.9)";
            blur.innerHTML = "";
            document.body.appendChild(blur);

            obj.html().style.zIndex = "100";
        }
    }
    return obj;
}

index.js 文件如下：

/* my css wasn't working as i wanted, so i had to fix it using js */
"use strict";
(function(d){
    const active = d.getElementsByClassName("currently_active_menuItem");
    active[0].style.textDecoration = "none";
})(document);

var about = get("about");

var aboutPointer = get("aboutPointer");
aboutPointer.on("click", function(){
    console.log("the about pointer has been clicked");
    focus(about);
});


function focus(theElement){
    console.log("the focus is working");
    theElement.focusOn();
}

Answer 1

您可以使用 box-shadow 属性来实现调光效果。 快捷方便：）

只需以编程方式切换一个类，它应该适用于您拥有的任何元素。

代码

 function focusAndDim() { document.getElementById("maindiv").classList.toggle("visible"); // if you want to get more fancy ;) document.getElementsByTagName("body")[0].classList.toggle("blur"); }

 .visible { box-shadow: 0 0 0 10000px #ccc; /* this code below make everything else hidden */ /* box-shadow: 0 0 0 10000px #fff; */ position: relative; } .btn { height: 20px; line-height: 1.4; border: 2px solid #999; padding: 12px 24px; margin-bottom: 10px; border-radius: 2px; cursor: pointer; } body { display: flex; align-items: center; flex-direction: column; justify-content: center; height: 100vh; } body.blur div { filter: blur(2px); } body.blur div.visible { filter: blur(0); }

 <div class="btn" onclick="focusAndDim()" id="maindiv">Click Me</div> <div>Other elements</div>

如何模糊除列表项之外的整个身体？

问题描述

1 个解决方案

解决方案1
1 2020-03-19 12:03:36

如何模糊除列表项之外的整个身体？

问题描述

1 个解决方案

解决方案1 1 2020-03-19 12:03:36

解决方案1
1 2020-03-19 12:03:36