如何更改依赖于其他组件的 CSS 属性

【问题标题】：How to change CSS property wchich depends of other compoentent如何更改依赖于其他组件的 CSS 属性
【发布时间】：2020-05-18 00:41:55
【问题描述】：

我正在尝试使用 react 库做一些网站。但是要很好地完成这一点，我不知道如何更改依赖于其他的 CSS 属性。例如，我不希望在我的文本区域 .mirror-container 中使用这个模糊过滤器，背景中使用的是 .home-header

代码如下：

.home-header {
    height: 55vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    position: absolute;
    z-index: -1;
    background: url("./assets/images/bg.jpeg") ;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(3px);
    background-position-y: 80%;
}
.mirror-container {
    width: 50rem;
    height: 85%;
    box-shadow: 0 5px 25px rgba(0,0,0, .5);
    color: #000;
    margin-top: 8rem;
    border-top: 1px solid white;
    border-right: 1px solid white;  // HERE NEED TO BE WITHOUT BLUR 
}

另外我想问一下如何在图片末尾添加一些阴影。我的意思是这样可以平滑地改变背景。或者也许我应该导入一个阴影波 png 并将其插入图像下方？最好的解决方案是什么？

问候。

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

here 之前有人问过您关于 filter CSS 属性的 blur 值的问题。

简而言之，filter 与其他 CSS 属性（例如 opacity）一样，一直应用到受影响的 DOM 子树，因此您无法阻止子元素（.mirror-container）受到模糊效果的影响在父元素 (.home-header) 中定义。

一种可行的替代方法是在两者之间添加一个覆盖.home-header 元素的元素，并将backdrop-filter: blur(3px) 应用于该元素。

backdrop-filter CSS 属性仅将过滤器应用于受影响元素后面的区域，因此您将看到 .home-header 上的模糊效果，但仍会看到 .mirror-container 内的内容为预计。

【讨论】：