将覆盖添加到除元素之外的主体

Adding overlay to body except an element

本文关键字：主体元素覆盖添加更新时间：2023-10-06

CSS

.myoverlay
        {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.7); 
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 0.5;
        }

HTML

   <html>
    <head></head>

    <body>    
    <div id="MyDiv">
    //some content
    </div>
    </body>

    </html>

jQuery

$(function(){
 $("body").not('#MyDiv').addClass("myoverlay");

});

在这里，我想将覆盖应用于除MyDiv之外的身体。上面显示的代码正在为包括MyDiv在内的整个身体应用覆盖。

这是代码！这是你想要的吗？

<html>
            <head>
                <title></title>
                <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
                <style>
                    .myoverlay:not(#MyDiv) {
                        position: absolute;
                        background-color: rgba(0, 0, 0, 0.7);
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        opacity: 0.5;
                    }
                    #MyDiv {
                        width: 200px;
                        height: 200px;
                        background: White;
                        z-index: 10;
                    }
                </style>
            </head>
            <body>
                <div class="wrapper">
                    <div id="MyDiv">
                        <div>
                        </div>
                    </div>
                </div>
            </body>
            <script>
                $(function () {
                    $('.wrapper').addClass('myoverlay');
                });
            </script>
        </html>

您可以通过添加具有覆盖的div来仅使用css，并从中排除您想要的部分

.overlay:not(.exclude){
  background-color: rgba(0,0,0,0.5);
  padding-top:2em;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.exclude {
  background-color: white;
  border-radius: 50%;
  z-index: 100;
  padding: 15px !important;
  margin-left: 25px;
}

<div style="padding:20px" class="overlay">
  <h2>Overlay</h2>
  <p>Add an overlay effect to the page content </p>
  
  <button  class="exclude">Turn on overlay effect</button>
</div>