个人中心
gpt4 book ai didi

javascript - CSS 背景效果 - 搜索栏的模糊背景

转载 作者：行者123 更新时间：2023-12-05 03:34:04 27 4
gpt4 key购买 nike

我正在尝试将背景(仅搜索栏)设为背景模糊背景，而不模糊其背后的整个背景图像。 Here's a screenshot of search bar

Here's an example of what the background of the search bar should look like

我试过 webkit filter: blur 和 filter: blur，但它们都模糊了整个主体，而不仅仅是使搜索栏的透明背景变得模糊。注意:我没有在下面的代码中使用背景图片，因为我会将这段代码嵌入到 iframe 中，它之前的背景将是一张图片。

编辑:我已删除原始 代码中的域名，因此它不会与该域名的搜索结果发生冲突。感谢大家帮我解决这个问题!你太棒了!

<html>
  <head>
    <base target="_blank" />
    <base target="_blank" />
    <script type="text/javascript">
      function submitSearch() {
        var siteSearchUrl = "https://*DOMAIN_NAME*/_/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, 0.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>
</html>

最佳答案 

* {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}
.sections {
  background-image: url(https://images.pexels.com/photos/3293148/pexels-photo-3293148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size:100vw;
  background-size:cover;
  background-repeat:no-repeat;
  height: 100vh;
  padding-top: 15vh;
}
.search-bar {
  border: 1px solid transparent;
  width: 300px;
  align-items: center;
  display: flex;
  margin: 0 auto;
  padding-left: 2vh;
  border-radius: 10px;
  transition: 0.5s;
}
.search-bar:hover {
  border: 1px solid rgb(142, 141, 141);
  backdrop-filter: blur(5px);
}
.search-text {
  padding: 4vh 8vh;
  background: transparent;
  border: none;
  height: 100%;
  width: 100%;
  border-radius: 50px;
  font-size: 18px;
  color: #424242;
  font-weight: 500;
}
.search-text:focus {
  outline: none;
}
.fa-search {
  color: #fff;
}
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://kit.fontawesome.com/2dba9f6187.js" crossorigin="anonymous"></script>
    <title>Blur Background Project</title>
    </head>
    <body>
    <header>
        <div class="center">
            <div class="sections">
                <div class="search-bar">
                    <a href="#"><i class="fas fa-search"></i></a>
                    <input type="text" placeholder="Search" class="search-text" />
                </div>
            </div>
        </div>
    </header>
    </body>

关于javascript - CSS 背景效果 - 搜索栏的模糊背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70226860/

27 4 0
文章推荐： firebase-cloud-messaging - 指令 "https://www.gstatic.com/"中的浏览器扩展不安全 CSP 值 'script-src'
文章推荐： r - R 中 x1+x2>2*x3 的经验概率
文章推荐： inno-setup - 在 Inno Setup 中将命令行参数值保存到文本文件
文章推荐： rust - 如何从带有 &mut self 的方法中调用带有 self 的方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com