javascript - How to "dim" certain area in a webpage -

i have page need dim area (div) instead of entire page. how can achieve this?

i have googled answer of them dimming whole page. below sample code got dimmed entire page.

<div id="dimmer"></div>   #dimmer {     background:#000;     opacity:0.5;     position:fixed; /* important use fixed, not absolute */     top:0;     left:0;     width:100%;     height:100%;     display:none;     z-index:9999; /* may not necessary */ } 

.area-to-dim {   position: relative; }  .dimmer {   position: absolute;   width: 100%;   height: 100%;   top: 0;   left: 0;   background-color: rgba(0,0,0,0.5); } 

html

<div class="area-to-dim">   <div class="dimmer"></div> </div>