:before 伪元素不起作用答案

【问题标题】：:before pseudo element is not working:before 伪元素不起作用
【发布时间】：2018-09-23 19:26:11
【问题描述】：

以下链接受到影响：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 的landingboxForm 引入磨砂玻璃样式，但如果我们使用伪元素，则不会发生任何事情。

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

有谁知道为什么 :before div 标签在 Chrome 检查器中只是灰色的以及为什么它没有出现？

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;
}

【问题讨论】：

能否请您添加您目前掌握的 CSS 代码？没看到，也许你是在不支持 CSS 过滤器的浏览器中查看的？ caniuse.com/#feat=css-filters
感谢我添加了 CSS。

标签： css-selectors pseudo-element pseudo-class

【解决方案1】：

至于你的问题

为什么 :before div 标签在 Chrome 检查器中只是灰色的，为什么它没有出现？

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

但这不会解决您的根本问题/不会产生磨砂玻璃效果。

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

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

在您的设置中，表单是绝对定位的，而图像标签也是绝对定位的。表单过滤器不会渗入该图像标签。

重温示例：

将背景图片应用到父容器
在表单中继承它
表单上的伪过滤器会模糊表单继承的背景

【讨论】：