Question

以下链接受到影响：https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=2753787&tc_deviceCategory=undefined&template_layout_id=5699672553&updated=1523614982274

我们遇到了表单及其父div的问题。我们尝试将一种磨砂玻璃样式引入父div landboxForm，但如果我们使用伪元素，则没有任何反应。

本教程来自https://medium.com/@AmJustSam/how-to-do-css-only-frosted-glass-effect-e2666bafab91，对其他人来说效果很好。我只是没有成功将它移植到我们的登陆页面。

有人知道为什么：在Chrome检查器中div标签之前是灰色的，为什么它没有出现？

CSS：

   .lp-sorba {
    background-size: cover;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    height: 900px !important;
}

.lp-sorba .landingpageHeader {
height: 80px;
background: #1d89d2;
}

.lp-sorba #hs-link-logo > img {
  margin-top: 22px;
}

.lp-sorba .landingboxForm:before {
 content:" ";
 background: inherit; 
 left: 0;
 right: 0;
 top: 0; 
 height: 100%;
 width: 100%;
 bottom: 0;
 box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
 filter: blur(10px) !important;
}

.lp-sorba .landingboxForm {
  background: inherit;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 23px 40px rgba(0,0,0,0.2);
  padding: 20px;
  border: 0.5px solid #edebeb;
}

Answer 1

关于你的问题

为什么：在Chrome检查器中div标签之前是灰色的，为什么它没有出现？

你的伪元素正在崩溃。将position: absolute;添加到.lp-sorba .landingboxForm:before规则。

但是，这不会解决您的根本问题/不会创造磨砂玻璃效果。

过滤器的工作方式是：它们仅应用于元素本身，而不是应用于元素本身。

在Medium / Codepen的示例中，表单元素从主元素继承背景。由此，它的伪元素可以对其应用过滤器。

在您的设置中，表单位于绝对位置，而图像标记也位于绝对位置。表单过滤器不会流入该图像标记。

重温示例：

将背景图像应用于父容器
以
表单上的伪过滤器将模糊表单继承的背景

：之前伪元素不起作用

1 个答案: