时间戳

首页 > 解决方案 > 磨砂玻璃效果：过滤器：模糊（）

html - 磨砂玻璃效果：过滤器：模糊（）

问题描述

编辑：添加了 codepen 链接

我目前正在尝试使用 CSS 获得磨砂玻璃效果，但是我尝试过的一切都只是产生了轻微的色调。

这正在Chrome中进行测试。

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background: url("https://i.imgur.com/ht1etAo.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.frost {
  color: #ffffff;
  width: 400px;
  height: 200px;
  position: absolute;
  background: inherit;
  overflow: hidden;
  margin: 0 auto;
  padding: 2rem;
}

.frost:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  filter: blur(20px);
  box-shadow: inset 0 0 3000px rgba(255, 255, 255, 0.5);
  margin: -20px;
}
<section id="frontImage">
  <div class="container">
    <div class="frost">
      <h3>Testing Glass</h3>
    </div>
  </div>
</section>

过滤器属性实际上似乎不起作用，因为更改它实际上不会影响 div。

这是我的代码：我正在尝试模糊霜 div

针对这种效果：https ://codepen.io/AmJustSam/full/ModORY/

我有什么：https ://codepen.io/anon/pen/PxWEde

我也尝试过使用 webkit-blur ，但这也没有奏效。

任何意见是极大的赞赏。如果需要更多信息，请询问。

标签： htmlcssfilterblur

解决方案

body {
  padding: 0;
  margin: 0;
  background: url("https://i.imgur.com/ht1etAo.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.frost {
  width: 400px;
  height: 200px;
  position: absolute;
  background: inherit;
}

.frost:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(2px);
  background: inherit;
}

.content {
  position: absolute;
  width: 340px;
  height: 140px;
  top: 30px;
  left: 30px;
}
<div class="frost">
  <div class="content">
    <h3>Testing Glass</h3>
    <p>lipsum</p>
  </div>
</div>

推荐阅读