磨砂玻璃外观

Question

在CSS中，有替代背景过滤器的方法吗？ 为了使此示例正常工作，我必须启用chrome：// flags /＃enable-experimental-web-platform-features

 body { background: url('http://verdewall.com/wp-content/uploads/2016/08/Background-Images-4H9.jpg') no-repeat center; } .glass { width: 100%; height: 500px; background: rgba(0,0,0,0.8); -webkit-backdrop-filter: contrast(4) blur(30px); backdrop-filter: contrast(4) blur(30px); }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Blur</title> </head> <body> <div class="glass"> </div> </body> </html>

启用实验性功能后的外观如下：

问题在于它下面的内容将是动态的。 因此，并非全部都是图像，而我发现的替代方法仅适用于图像。 像这里显示的模糊一样的半透明：

Answer 1

一种解决方法是使用剪切路径，过滤器和两次相同的内容，然后您将获得与背景过滤器相同的结果

 .container { width: 200px; height: 200px; position: relative; padding:1px; } .container .glass, .container .filter { background: url('https://lorempixel.com/400/200/') center/cover; text-align:center; color:#fff; height:100%; } .filter { position: absolute; top: 0; bottom: 0; right: 0; left: 0; filter: contrast(4) blur(3px); z-index: 2; clip-path: polygon(5% 15%, 82% 30%, 83% 71%, 17% 73%); }

 <div class="container"> <div class="glass"> <h1>A title</h1> <p>Some content Some content</p> </div> <div class="filter"> <h1>A title</h1> <p>Some content Some content</p> </div> </div>

您可以创建一个jQuery脚本，当包含大量内容时将为您复制内容。 您还可以考虑使用更复杂的脚本来调整所有需要的值和参数。

 $('.backdrop').each(function() { var e = $(this).html(); $(this).append('<div class="filter">'+e+'</div>'); })

 .container { width: 200px; height: 200px; position: relative; padding:1px; display:inline-block; } .container .glass, .container .filter { background: url('https://lorempixel.com/400/200/') center/cover; text-align:center; color:#fff; height:100%; } .filter { position: absolute; top: 0; bottom: 0; right: 0; left: 0; filter: contrast(4) blur(3px); z-index: 2; clip-path: polygon(5% 15%, 82% 30%, 83% 71%, 17% 73%); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container backdrop"> <div class="glass"> <h1>A title</h1> <p>Some content Some content</p> </div> </div> <div class="container"> <div class="glass"> <h1>A title</h1> <p>Some content Some content</p> </div> </div>

Answer 2

简单来说就是：过滤器

filter: blur(10px);

但是，您必须稍微更改一下结构。 这是一个例子：

 *{ margin: 0; padding: 0; font-family: sans-serif; } main{ height: 100vh; background: url('https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=') fixed no-repeat; background-size: cover; } #container{ width: 350px; height: 500px; background: inherit; position: absolute; overflow: hidden; top: 50%; left: 50%; margin-left: -175px; margin-top: -250px; border-radius: 8px; } #container:before{ width: 400px; height: 550px; content: ""; position: absolute; top: -25px; left: -25px; bottom: 0; right: 0; background: inherit; box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2); filter: blur(10px); } form img{ width: 120px; height: 120px; border-radius: 100%; } form{ text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } input{ background: 0; width: 200px; outline: 0; border: 0; border-bottom: 2px solid rgba(255,255,255, 0.3); margin: 20px 0; padding-bottom: 10px; font-size: 18px; font-weight: bold; color: rgba(255,255,255, 0.8); } input[type="submit"]{ border: 0; border-radius: 8px; padding-bottom: 0; height: 60px; background: #df2359; color: white; cursor: pointer; transition: all 600ms ease-in-out; } input[type="submit"]:hover{ background: #C0392B; } span a{ color: rgba(255,255,255, 0.8); }

 <main> <div id="container"> <form action=""> <input type="text" value=""><br> <input type="password"><br> <input type="submit" value="SIGN IN"><br> <span><a href="#">Forgot Password?</a></span> </form> </div> </main>

Answer 3

尝试这个：

.glass:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(0,0,0,0.8);

  display: block;
  width:100%;
  height: 100%;

  -webkit-filter: blur(30px);
  -moz-filter: blur(30px);
  -o-filter: blur(30px);
  -ms-filter: blur(30px);
  filter: blur(30px);
}

磨砂玻璃外观

问题描述

3 个解决方案

解决方案1
3 已采纳 2018-02-20 14:36:12

解决方案2
0 2018-02-20 14:19:43

解决方案3
0 2018-02-20 14:24:42

磨砂玻璃外观

问题描述

3 个解决方案

解决方案1 3 已采纳 2018-02-20 14:36:12

解决方案2 0 2018-02-20 14:19:43

解决方案3 0 2018-02-20 14:24:42

解决方案1
3 已采纳 2018-02-20 14:36:12

解决方案2
0 2018-02-20 14:19:43

解决方案3
0 2018-02-20 14:24:42