时间戳

首页 > 解决方案 > webkit-backdrop-filter 在 React.js 中不起作用

css - webkit-backdrop-filter 在 React.js 中不起作用

问题描述

我在 React 网站上工作，试图为带有文本跨度的容器添加模糊效果。无论出于何种原因，模糊都不会显示。我不知道为什么。

任何帮助都会很棒！

HTML：

<div className={styles.CardContentContainer}>
                <div className={styles.ProjectTitle1}>
                  <span>Real Estate</span>
                </div>
...

CSS：

.ProjectTitle1 {
    padding-right: 9px;
    padding-left: 9px;
    padding-bottom: 4px;
    padding-top: 4px;
    color: white;
    font-weight: 700;
    z-index: 1;
    position: absolute;
    top: -84px;
    right: 0px;
    background-color: #aa1a18;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--main-top-shadow);
    box-shadow: var(--main-shadow);
}

标签： cssreactjswebkitblur

解决方案

推荐阅读