একটি নির্দিষ্ট অঞ্চল বাদে পুরো পর্দা ঝাপটায়?

Question 1

আমি একটি টিউটোরিয়াল তৈরি করতে চাই যা ব্যবহারকারীকে ঠিক কোথায় ক্লিক করতে হবে। আমি সঙ্গে সম্পূর্ণ পর্দা আবরণ চেষ্টা করছি <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>

স্নিপেট প্রসারিত করুন

আমি কী অর্জন করার চেষ্টা করছি তার একটি মকআপ চিত্র এখানে:

Question 2

আপনি এটি কেবল একটি দিয়ে করতে পারেন divএবং এটি দিতে পারেন box-shadow।

সম্পাদনা করুন: @ নিক শোভেলিডজে উল্লেখ করেছেন যেহেতু আপনার যোগ করার বিষয়টি বিবেচনা করা উচিতpointer-events: none

@ প্রিনজর্ন হিসাবে প্রস্তাবিত হিসাবে এর 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>

স্নিপেট প্রসারিত করুন

Question 3

আপনি এমন একটি এসভিজি তৈরি করতে পারেন যা আপনাকে এমন যেখানে এমন গর্ত রয়েছে যেখানে একটি রাস্তা দিয়ে ভরাট করা যেতে পারে। তবে আমি অনুমান করি যে ক্লিকগুলি হ্যান্ডেল করার জন্য আপনার কোনও পথের সন্ধান করা দরকার, যেহেতু এগুলির সমস্তই ওভারলাইড এসভিজিতে লক্ষ্যবস্তু হবে। আমি document.getElementFromPointআপনাকে এখানে সাহায্য করতে পারেন। এমডিএন

Question 4

এটি @ ভিলিকুর জবাবের মতো একইভাবে করা যেতে পারে তবে একটি সীমানা সহ।

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>

স্নিপেট প্রসারিত করুন

Question 5

আপনি সিএসএস সম্পত্তি ব্যবহার করে ভিলকির উত্তরের মতোই অর্জন করতে পারেন outline। এটিতে দুর্দান্ত ব্রাউজার সমর্থন রয়েছে (এবং আইই 8+ তেও কাজ করে)। আউটলাইনগুলির সীমানার মতো একই বাক্য গঠন রয়েছে তবে সীমানার বিপরীতে তারা স্থান নেয় না, তারা সামগ্রীর উপরে আঁকা হয়।

এছাড়াও 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>

স্নিপেট প্রসারিত করুন

Question 6

@ উইলকু সিএসএস ব্যবহার করে এখানে সহজ 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>

স্নিপেট প্রসারিত করুন

Question 7

#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;
}