如何在不使用背景图像的情况下获得背景磨砂玻璃效果答案

【问题标题】：How to get a background frosted glass effect without using background image如何在不使用背景图像的情况下获得背景磨砂玻璃效果
【发布时间】：2019-05-05 21:15:17
【问题描述】：

我正在尝试制作一个模态窗口以对模糊的背景做出反应。我想要实现的是模糊背景内容和不模糊背景图像，因为只有模态窗口后面的内容没有图像。到目前为止，我遇到了frosting glass、frosting glass 和 glass effect 这些解决方案，但它们都使用背景图像来应用模糊效果，但这不是我想要的。

反应组件：

import React from "react";
import './index.scss';




const Modal = ({ handleClose, show, children }) => {
    return (
            <div class="modal display-block">
               <div class="modal-container">
                  <section class="modal-main">
                      <div class="row no-gutters header">
                          <div class="col">
                             <i class="fa fa-lg fa-close"></i>
                          </div>
                      </div>
                      <div class="row no-gutters content"></div>
                  </section>
               </div>
           </div>
    );
};

export default Modal;

css:

@import 'yelStrap/_variables.scss';




.modal {
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
  }

.modal-container {
  background: inherit;
  position: absolute;
  top: 50px;
  right: 250px;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

.modal-container::before{
  content: '';
  width: 100% ;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; 
  background-color: rgba(255, 255, 255, 0.5);
  filter: blur(6px);
  -webkit-filter: blur(6px);
  -moz-filter: blur(6px);
  -o-filter: blur(6px);
    -ms-filter: blur(6px);
 }

.modal-main {
  position: relative;
  background: white;
  width: 90%;
  min-height: 352px;
  top: 10%;
  left: 0px;
  right: calc(10% / 2);
  padding: 10px;
  background-color: $white;
  border-radius: 5px;
  box-shadow: 0 0 12px 2px rgba(20, 150, 255, 0.15);
  z-index: $zindex-modal;
}

.fa-close {
  color: $water-disabled;
  cursor: pointer;
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

当我将背景图片添加到 .modal-container::before 它可以工作但使用背景颜色时却不行！

任何帮助表示赞赏，谢谢。

【问题讨论】：

我认为如果你想模糊文本，那么模糊必须在 div 本身上：jsfiddle.net/ayhj9vb0/2285 - 它将模糊应用于实际元素而不是它背后的元素 - jsfiddle.net/ayhj9vb0/2286

标签： html css reactjs sass

【解决方案1】：

你去。只看结果。事实上，我建议将模式保留在您想要模糊的内容旁边，而不是将其保留在内容中。

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  width: 100%;
  height: 100%; 
  
}

.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="bg-image">
asdaidnasijbadkjhvbafvjhabdf vkjhabdfvk ahjbdfkv hjbfdkv s
</div>

<div class="bg-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sit dolores nam tempore dolore dicta quae fugiat assumenda, obcaecati, quibusdam. Officiis autem perspiciatis pariatur, beatae possimus, nulla nobis adipisci ipsum.</p>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

添加

filter: blur(1px);

增加模糊像素会增加背景的模糊度。

小提琴here

【讨论】：

感谢您的考虑，但问题是我的模态窗口（组件）是在页面内容中加载的，如果我想模糊内容，模态窗口也会变得模糊！