如何在不使用背景图像的情况下获得背景磨砂玻璃效果
Posted
技术标签:
【中文标题】如何在不使用背景图像的情况下获得背景磨砂玻璃效果【英文标题】：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 【参考方案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
【讨论】：
感谢您的考虑，但问题是我的模态窗口（组件）是在页面内容中加载的，如果我想模糊内容，模态窗口也会变得模糊！以上是关于如何在不使用背景图像的情况下获得背景磨砂玻璃效果的主要内容，如果未能解决你的问题，请参考以下文章
如何在不使用 imageview 的情况下直接在视图上将图像设置为背景？
如何在不挤压背景图像的情况下扩展 UIButton 的 hitTest 区域？