input 框实现毛玻璃效果

用心去追梦

于 2024-07-04 17:19:35 发布

阅读量264

点赞数 5

文章标签： css js

本文链接：https://blog.csdn.net/qq_33240556/article/details/140184895

版权

要在输入框（input）周围实现毛玻璃效果（也称为玻璃态或玻璃化效果），可以使用CSS的滤镜（filter）属性，特别是blur函数，结合一些额外的CSS技巧来创建透明的叠加层。以下是一个基本的示例代码，展示如何为一个输入框添加毛玻璃背景效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 创建一个容器，用于放置输入框和毛玻璃背景 */
  .input-container {
    position: relative;
    display: inline-block;
  }

  /* 输入框样式 */
  .input-container input {
    padding: 10px;
    border: none;
    outline: none;
    background-color: rgba(255, 255, 255, 0.5); /* 半透明背景，以便看到下方的模糊效果 */
  }

  /* 毛玻璃背景层 */
  .input-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('your-image-url.jpg'); /* 这里是背景图片的URL */
    filter: blur(10px); /* 模糊效果，数值可以根据需要调整 */
    opacity: 0.5; /* 背景模糊层的透明度 */
    z-index: -1; /* 确保此层在输入框下方 */
  }
</style>
</head>
<body>

<div class="input-container">
  <input type="text" placeholder="请输入文字...">
</div>

</body>
</html>

这段代码中，.input-container 是一个包含输入框的容器，其伪元素 ::before 用来创建一个覆盖整个容器的毛玻璃背景层。通过调整 blur(10px) 中的像素值，你可以控制背景模糊的程度；而 opacity 属性则可以调整背景的透明度，以达到理想的毛玻璃视觉效果。

请确保替换 'your-image-url.jpg' 为你实际想要使用的背景图片URL，或者调整为其他背景样式，如纯色背景加上其他CSS效果来达到类似毛玻璃的视觉感受。

用心去追梦

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
input 框实现毛玻璃效果

为你实际想要使用的背景图片URL，或者调整为其他背景样式，如纯色背景加上其他CSS效果来达到类似毛玻璃的视觉感受。属性则可以调整背景的透明度，以达到理想的毛玻璃视觉效果。/* 创建一个容器，用于放置输入框和毛玻璃背景 *//* 半透明背景，以便看到下方的模糊效果 */中的像素值，你可以控制背景模糊的程度；/* 模糊效果，数值可以根据需要调整 *//* 这里是背景图片的URL *//* 确保此层在输入框下方 *//* 背景模糊层的透明度 *//* 毛玻璃背景层 *//* 输入框样式 */
复制链接

扫一扫