搜索
搜索

CSS背景效果-模糊搜索欄背景

Youssef Ashraf 发表于 Dev
33
優素福·阿什拉夫

我正在嘗試使（僅搜索欄）的背景成為背景模糊背景，而不會模糊其背後的整個背景圖像。這是搜索欄的屏幕截圖這是搜索欄 背景應該是什麼樣子的示例我已經嘗試過 webkit 過濾器：模糊和過濾器：模糊，但它們都模糊了整個身體，而不僅僅是使背景的透明背景搜索欄模糊。注意：在下面的代碼中，我沒有使用背景圖像，因為我將這段代碼嵌入到 iframe 中，它之前的背景將是一個圖像。

<html>
<head>
    <base target="_blank">
    <base target="_blank">
    <script type="text/javascript">
        function submitSearch(){
              var siteSearchUrl = 'https://support.yssf.ml/_/search?query=';  // Replace with your site's search URL
              var query = document.getElementById("search-query-input").value;
              var url = siteSearchUrl + query
        if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
        {
         var referLink = document.createElement("a");
         referLink.href = url;
         document.body.appendChild(referLink);
         referLink.click();
        }
        else { window.open(url,'_blank'); } // All other browsers
        }
        function searchKeyPress(e){
          // look for window.event in case event isn't passed in
          e = e || window.event;
          if (e.keyCode == 13)
          {
              document.getElementById('search-icon').click();
              return false;
          }
          return true;
        }
        
    </script>
    <link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <style>
        body {
        margin:0;
        padding:14px 6px 0 6px;
        background-color:transparent;
        font-family: 'Roboto', sans-serif;
        overflow:hidden;
        }
        #search-icon {
        margin: 4px 4px 4px 10px;
        padding:8px;
        height:24px;
        vertical-align:middle;
        cursor:pointer;
        }
        #search-icon:hover {
        background: rgba(155,153,176, 0.2);
        border-radius: 100px;
        }
        #search-query {
        background: inherit;
        }
        body:before {
        background: inherit;
        }
        #search-query:before {
        box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
        filter: blur(10px);
        }
        #search-query {
        width:max-content;
        margin:0 auto;
        overflow:hidden;
        border:0;
        border-radius:14px;
        color: #212121;
        font-size:16px;
        line-height:24px;
        transition:0.4s;
        }
        #search-query:hover {
        color: #212121;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        font-size:16px;
        line-height:24px;
        }
        #search-query-input {
        width:60vw;
        height:24px;
        font-size:16px;
        font-stretch: normal;
        letter-spacing: normal;
        line-height:24px;
        border:0;
        color:#000;
        background-color:transparent;
        cursor:text;
        margin-left:-5px;
        text-align:start;
        vertical-align:middle;
        }
        @media (max-width:500px) {#search-query-input {width:80vw}}
        @media (min-width:900px) {#search-query-input {width:60vw}}
    </style>
</head>
<body>
    <!-- <input type="text" id="query" />
        <button id="search" onclick="submitSearch()">Search</button> -->
    <div id="search-query">
        <img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
        <input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
    </div>
</body>
希瓦姆·夏爾馬 

function submitSearch(){
      var siteSearchUrl = 'https://support.yssf.ml/_/search?query=';  // Replace with your site's search URL
      var query = document.getElementById("search-query-input").value;
      var url = siteSearchUrl + query
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
 var referLink = document.createElement("a");
 referLink.href = url;
 document.body.appendChild(referLink);
 referLink.click();
}
else { window.open(url,'_blank'); } // All other browsers
}
function searchKeyPress(e){
  // look for window.event in case event isn't passed in
  e = e || window.event;
  if (e.keyCode == 13)
  {
      document.getElementById('search-icon').click();
      return false;
  }
  return true;
}
body {
  margin:0;
  padding:14px 6px 0 6px;
  background-color:transparent;
  font-family: 'Roboto', sans-serif;
  overflow:hidden;
  background: url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  background-size:100vw;
  background-size:cover;
  background-repeat:no-repeat;
}
#search-query{
  background: transparent;
  width:max-content;
  margin:0 auto;
  overflow:hidden;
  border:0;
  border-radius:14px;
  color: #212121;
  font-size:16px;
  line-height:24px;
  transition:0.4s;
}
#search-query::before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
}
#search-query:hover {
  color: #212121;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 
              0 3px 1px -2px rgba(0,0,0,0.12), 
              0 1px 5px 0 rgba(0,0,0,0.2);
  font-size:16px;
  line-height:24px;
  backdrop-filter:blur(3px);
}
#search-query-input {
  width:60vw;
  height:24px;
  font-size:16px;
  font-stretch: normal;
  letter-spacing: normal;
  line-height:24px;
  border:0;
  color:#000;
  background-color:transparent;
  cursor:text;
  margin-left:-5px;
  text-align:start;
  vertical-align:middle;
}
#search-query-input:hover{
  color:white;
}
#search-icon {
  margin: 4px 4px 4px 10px;
  padding:8px;
  height:24px;
  vertical-align:middle;
  cursor:pointer;
}
#search-icon:hover {
  background: rgba(155,153,176, 0.2);
  border-radius: 100px;
}
#search-query-input:hover::placeholder{
  color:white;
}
@media (max-width:500px) {
  #search-query-input {
    width:80vw;
   }
}
@media (min-width:900px) {
  #search-query-input {
    width:60vw;
  }
}
<html>
<head>
    <base target="_blank">
    <base target="_blank">
    <link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
    <!-- <input type="text" id="query" />
        <button id="search" onclick="submitSearch()">Search</button> -->
    <div id="search-query">
        <img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
        <input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
    </div>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CSS模糊效果对实时背景

CSS 模糊效果和背景颜色

背景模糊效果

CSS折角效果透明背景

CSS背景缩放与淡入效果

CSS中的虚线背景叠加效果

CSS背景颜色过渡效果不佳

CSS模糊背景问题

剪辑css模糊背景

背景img模糊-CSS

全页搜索时模糊背景

快速向背景添加模糊效果

CSS模糊，边框与背景融合

CSS-对背景图片的“剔除” /透视效果

在css中制作具有悬停效果的渐变背景按钮

Flutter：获取CSS：在某种效果之后，图像才能应用背景

如何使用 CSS 创建对角线背景效果

CSS 卡效果：背面未显示在父背景之上

CSS-动画背景图像-带循环缩放效果

具有透明背景的纯css折叠效果

CSS文本背景悬停效果在mouseout上表现异常

复制CSS“背景图像”的效果-替代方法？

CSS 视差效果拉伸我的背景图像

动画背景效果

边框背景效果

移除mousemove上背景图片的模糊效果

Tableview背景上的模糊效果不起作用

对背景有模糊效果，但仅在覆盖层后面吗？

Angular Material-Mat-Dialog-更改背景模糊/变暗效果

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档