एक निश्चित क्षेत्र को छोड़कर पूरी स्क्रीन मंद?

Question

मैं एक ट्यूटोरियल बनाना चाहता हूं जो उपयोगकर्ता को उस जगह ले जाएगा जहां क्लिक करना है। मैं एक साथ पूरे स्क्रीन को कवर करने की कोशिश कर रहा हूँ <div>जो एक को छोड़कर सभी तत्वों मंद होगा विशिष्ट क्षेत्र है, जिसमें एक निश्चित है width, height, topऔर left।

समस्या यह है, मैं माता-पिता background-color(जो पारदर्शी भी है) को "रद्द" करने का कोई तरीका नहीं ढूंढ सकता ।

नीचे दिए गए स्निप में, holeवह डिव है जो बिना background-colorउसके माता-पिता सहित किसी के बिना होना चाहिए ।

क्या इसे पूरा किया जा सकता है? कोई विचार?

#bg{
   background-color:gray;
   opacity:0.6;
   width:100%;
   height:100vh;
}
#hole{
   position:fixed;
   top:100px;
   left:100px;
   width:100px;
   height:100px;
}

<div id="bg">
    <div id="hole"></div>
</div>

यहाँ एक मॉकअप छवि है जिसे मैं प्राप्त करने की कोशिश कर रहा हूँ:

Comments

यदि आप एक फ़ीचर टूर / ट्यूटोरियल बना रहे हैं, तो आपको ऐसा करने के लिए js पुस्तकालयों में से एक में रुचि हो सकती है। उनके पास कुछ निफ्टी विशेषताएं हैं और आपको एक-बंद सीएसएस प्रभावों का एक गुच्छा लिखने की परेशानी से बचाएगा। की जाँच करें introjs.com या linkedin.github.io/hopscotch ।

— अष्टकूट

यह सिर्फ एक लिब के लिए एक सुझाव है: heelhook.github.io/chardin.js

— ऑनलाइन थॉमस

Answer 1

आप इसे सिर्फ एक के साथ कर सकते हैं divऔर इसे दे सकते हैं box-shadow।

संपादित करें: जैसा कि @Nick Shvelidze ने बताया है, आपको जोड़ने पर विचार करना चाहिएpointer-events: none

@Prinzhorn के सुझाव के vmaxलिए जोड़ा गया मूल्यbox-shadow

div {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  /* for IE */
  box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
  /* for real browsers */
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
  pointer-events: none;
}

<div></div>

Comments

pointer-events: noneयदि आप इसके नीचे के क्षेत्र को क्लिक करने योग्य चाहते हैं तो जोड़ना सुनिश्चित करें ।

— निक श्वेलीदेज़

1,000px मेरे लिए पर्याप्त नहीं लगता है - ऐसा लगता है कि बहुत सारे मामले होंगे जहां यह स्क्रीन नहीं भरता है, अन्यथा वास्तव में चतुर समाधान।

— ESR

@EdmundReed को आप अपनी आवश्यकताओं के लिए समायोजित कर सकते हैं :)

— VilleKoo

box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);पूरे स्क्रीन को कवर करने की गारंटी होगी

— प्रिंज़ोर्न

@ विल्कू आप इसे 1000px लाइन के पीछे जोड़ सकते हैं और इसे गिराने के रूप में रख सकते हैं

— प्रिज़ोर्न

Answer 2

आप एक एसवीजी बना सकते हैं जो एक ऐसे रास्ते से भरा है जिसमें छेद है जहां आपको इसकी आवश्यकता है। लेकिन मुझे लगता है कि आपको क्लिक को संभालने का एक तरीका खोजने की आवश्यकता है, क्योंकि उन सभी को ओवरलैड svg पर लक्षित किया जाएगा। मैं document.getElementFromPointयहां आपकी मदद कर सकता हूं । MDN

Comments

मुझे लगता है कि Google फ़ीडबैक फॉर्म svg का उपयोग करके मंद रेस्ट एरिया में किया जाता है।

— दुर्गा

Answer 3

यह @ विलेकू के उत्तर के समान भी किया जा सकता है, लेकिन सीमा के साथ।

div {
    border-style: solid;
    border-color: rgba(0,0,0,.3);
    pointer-events: none;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    border-width: 40px 300px 50px 60px;
}

<div></div>

Answer 4

आप CSS का उपयोग करके VilleKoo के उत्तर के समान ही प्राप्त कर सकते हैंoutline संपत्ति हैं। इसमें उत्कृष्ट ब्राउज़र समर्थन है (और IE8 + में भी काम करता है)। रूपरेखा में सीमाओं के समान सिंटैक्स होता है, लेकिन सीमा के विपरीत वे स्थान नहीं लेते हैं, वे सामग्री से ऊपर खींचे जाते हैं।

IE9 + के लिए भी आप के 99999pxसाथ बदल सकते हैं calc(100 * (1vh + 1vw - 1vmin))।

इस दृष्टिकोण का नुकसान यह है कि outlineइससे प्रभावित नहीं होता है border-radius।

डेमो:

div {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  /* IE8 */
  outline: 99999px solid rgba(0,0,0,.3);
  /* IE9+ */
  outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3);
  /* for other browsers */
  outline: 100vmax solid rgba(0,0,0,.3);
  pointer-events: none;
}

<div></div>

Answer 5

यहाँ @VilleKoo css का उपयोग करके सरल jQuery कोड है

var Dimmer = (function(){
  var el = $(".dimmer");
  
  return {
    showAt: function(x, y) {
      el
        .css({
          left: x,
          top: y,
        })
        .removeClass("hidden");
    },
    
    hide: function() {
      el.addClass("hidden");
    }
  }
}());


$(".btn-hide").click(function(){ Dimmer.hide(); });
$(".btn-show").click(function(){ Dimmer.showAt(50, 50); });

.dimmer {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for IE */
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); /* for real browsers */
  pointer-events: none;
}

.hidden { display: none; }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="submit" disabled>
  </div>
  
  <input type="button" value="Hide" class="btn-hide">
  <input type="button" value="Show" class="btn-show">
  <div class="dimmer hidden"></div>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>

Answer 6

#bg {
   background-color: gray;
   opacity: 0.6;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99998;
}
#hole {
   position: fixed;
   top: 100px;
   left: 100px;
   width: 100px;
   height: 100px;
   z-index: 99999;
}