如何在搜索時添加透明背景？

我的目標是簡單透明背景添加到HTML的身體，當有人在輸入文本字段如何在搜索時添加透明背景？

搜索之前，搜索

一旦搜索

代碼

<body> 
    <div class="container"> 
    <nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="/">Testing</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 

     <form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-amazon" style="margin-left: 20%" id="search-realtime"> 
     <div role="search" class="sbx-amazon__wrapper"> 
      <input type="search" id="search_input" name="search" placeholder="Search your product.." autocomplete="off" required="required" class="sbx-amazon__input"> 
      <button type="submit" title="Submit your search query." class="sbx-amazon__submit"> 
      <svg role="img" aria-label="Search"> 
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-11"></use> 
      </svg> 
      </button> 
      <button type="reset" title="Clear the search query." class="sbx-amazon__reset"> 
      <svg role="img" aria-label="Reset"> 
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use> 
      </svg> 
      </button> 
     </div> 
     </form> 
    </div> 
    </div> 
</nav> 


    </div> 

</body>

在稍後的搜索輸入上，輸入"I will"查看結果您可以檢查的jsfiddle全碼https://jsfiddle.net/Ldpqhkam/2/

來源

2017-06-04 sinusGob

集'不透明度：'任何東西小於1 –

你可以給它的覆蓋。隱藏它並根據輸入文本框中的值顯示它。 https://plnkr.co/edit/M4DryMbEk2QwUvFVTtAk?p=preview – lhavCoder

就在body（最好在底部）中的某個地方創建一個div元素，像這樣：

<div id="search-overlay"></div>

，並給它這個CSS：

#search-overlay { position:fixed; top:52px; bottom:0; left:0; right:0; background:#000; opacity:.5; display:none; }

然後，您通過掛鉤自動填充的相應事件，即autocomplete:shown和來切換此覆蓋div的display屬性

看到這裏的工作例如： https://jsfiddle.net/Ldpqhkam/5/

來源

2017-06-04 14:21:09 HaukurHaf

感謝它確實有幫助，但似乎它不包括整個頁面。 – sinusGob

我將代碼放在頁面底部，'div' – sinusGob

我需要將'bottom'改爲某個東西嗎？ – sinusGob

如何在搜索時添加透明背景？

回答

相關問題