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

问题描述 投票：0回答：1

我正在 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);
}
css reactjs webkit blur
1个回答
0
投票

实际上这不是React问题，请注意，background-filter属性充当背景，所以如果你为元素添加背景颜色，看到的将是颜色，你不会注意到模糊效果。但如果你想使用背景颜色，你应该做的是使用较低的不透明度百分比。

您可以将以下示例视为我要解释的内容的参考。

<!DOCTYPE html>
<html lang="en">
<style>
.ProjectTitle1 {
    padding-right: 9px;
    padding-left: 9px;
    padding-bottom: 4px;
    padding-top: 4px;
    color: white;
    font-weight: 700;
    z-index: 1;
    position: absolute;
    top: 10px;
    left: 30px;
    background-color: #aa1a18;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--main-top-shadow);
    box-shadow: var(--main-shadow);
}
/* without the background color */
.ProjectTitle1-noBGColor {
    padding-right: 9px;
    padding-left: 9px;
    padding-bottom: 4px;
    padding-top: 4px;
    color: white;
    font-weight: 700;
    z-index: 1;
    position: absolute;
    top:40px;
    left: 30px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--main-top-shadow);
    box-shadow: var(--main-shadow);
}

/* background color with low opacity */
.ProjectTitle1-BGColorOpacity {
    padding-right: 9px;
    padding-left: 9px;
    padding-bottom: 4px;
    padding-top: 4px;
    color: white;
    font-weight: 700;
    z-index: 1;
    position: absolute;
    top: 70px;
    left: 30px;
    backdrop-filter: blur(20px);
    background-color: rgba(255,255,255,0.1);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--main-top-shadow);
    box-shadow: var(--main-shadow);
}
</style>

<body>
    <div class="container">
        <img src="https://picsum.photos/200/300" width="230px" height="250px">
        <div class="ProjectTitle1">
            <span>Real Estate</span>
        </div>
        <div class="ProjectTitle1-noBGColor">
            <span>Real Estate</span>
        </div>
        <div class="ProjectTitle1-BGColorOpacity">
            <span>Real Estate</span>
        </div>
    </div>
</body> 

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.