Сайт фона становится тусклым, когда фокус на ввод формы

Question

У меня есть веб-сайт с большой формой поиска и большим фоном веб-сайта. У меня была идея для моего сайта. То есть, чтобы на веб-сайте затуманился оттенок, когда я нажимаю на форму поиска. Но тогда я увидел то же самое на bing.com. Я пытался сделать это с помощью css, но не смог, несмотря ни на что. Любая идея, чтобы это произошло?

Update

Я это сейчас в моем файле CSS.

#dim {width:100%; opacity:0; background:#000; position:absolute; height:100%;} 

Я хочу код JS, чтобы сделать его opacity превращается в 0.5, когда я нажимаю на моей форме.

Ниже приводится код моёго бланка.

<form name="searchform" onsubmit="return !!(validateSearch() &amp;&amp; dosearch());"> 
<input type="text" name="searchterms" class="terms" id="terms" placeholder="What are you searching for?"> 
<select name="sengines" class="state" id="state"> 
<option value="" selected>Select a State</option> 
<option value="http://kl.onehomereno.com?s=">Klang Valley</option> 
</select> 

<div class="pad10"></div> 
<input name="Search" type="submit" value="Search" class="button3"> 
</form> 

У меня есть terms как id. Поэтому мне нужен код js для работы с #terms и #dim. Любое предложение?

Answer 1

для прослушивания clicks на элемент формы и изменить opacity в class с background

Например Вы можете использовать JavaScript

EDIT:

CSS

.dim { 
background: url("home_page.PNG") no-repeat; 
background-size: cover; 
width: 100%; 
height: 500px; 
opacity: 0; 
} 

HTML

<div class="dim"></div> 
<input type="text" id="term"> 

JavaScript

$(document).ready(function() { 
    $('#term').click(function(e) { 
     e.stopPropagation(); 
     $('.dim').css('opacity', '0.5'); 
    }); 
    $(document).on("click", function() { 
     $(this).find('.dim').css('opacity', '0'); 
    }); 
}); 

Надеется, что вы получите, как это работает.