背景过滤器问题答案

【问题标题】：Issue with backdrop-filter背景过滤器问题
【发布时间】：2018-08-02 21:33:59
【问题描述】：

backdrop-filter 属性有问题，因为我在背景过滤器中添加的过滤器什么也没做，我不明白为什么。

这是我的代码：

.army_selection
    {
    	margin: 20px;
    	margin-left: 10px;
    	margin-right: 10px;
    
    	min-width: 300px;
    	max-width: 300px;
    	height: 400px;
    
    	background-size: cover;
    	background-position: center;
    
    	transition: 0.1s;
    }
    
    .army_selection:hover :nth-child(1)
    {
    	opacity: 1;
    
    	-webkit-backdrop-filter: brightness(25%);
    
    	transition: 0.1s;
    }

<div id="army1" class="army_selection">
  <div class="army_selection_bloc">
    <p class="army_text">Ultramarines</p>
  </div>
</div>

【问题讨论】：

你没有在任何地方陈述背景。加上 25% 的亮度非常小，所以你可能没有注意到它。 - codepen.io/Paulie-D/pen/VBxmqX
@Code_Ninja filter 不等同于 backdrop-filter。
是的，然后我开始阅读更多关于这些的内容

标签： html css

【解决方案1】：

该属性是实验性的，支持有限。

MDN reference

要在 Chrome v.47 中使用，您需要 Enable Experimental Web Platform Features。

仔细考虑有限的支持；如果没有这个特定的属性，也可以达到相同的效果。一个例子workaround。

【讨论】：

【解决方案2】：

我认为您正在尝试完成这样的事情？

这里有一个解决方法，可能不是你要找的，希望对你有帮助

.army_selection {
    	margin: 20px;
    	margin-left: 10px;
    	margin-right: 10px;
    
    	min-width: 300px;
    	max-width: 300px;
    	height: 400px;
      background-color: rgba(0,0,0,0);
    	background-size: cover;
    	background-position: center;
    
    	transition: background-color .2s;
}
    
.army_selection:hover {
  background-color: rgb(0, 0, 0, 0.25);
}

<div id="army1" class="army_selection">
  <div class="army_selection_bloc">
    <p class="army_text">Ultramarines</p>
  </div>
</div>

【讨论】：

问题是 .army_selection 有一个图像作为背景而不仅仅是颜色
所以您只希望图像透明而不是“Ultramarines”文本，对吧？
是的，就是这样......但不透明只是不太亮

【解决方案3】：

.army_selection {
    	margin: 20px;
    	margin-left: 10px;
    	margin-right: 10px;
    	min-width: 300px;
    	max-width: 300px;
    	height: 400px;
      opacity:-2;
      background-color: rgba(0,0,0,0);
    	background-size: cover;
    	background-position: center;
    
    	transition: background-color .5s;
}
    
.army_selection:hover {
  background-color: rgb(0, 0, 0.8, 0.25);
}

<div id="army1" class="amySelection">
  <div class="army_selection_bloc">
    <p class="army_text">Ultramarines</p>
  </div>
</div>

.armySelection {
    	margin: 20px;
    	margin-left: 10px;
    	margin-right: 10px;
    
    	min-width: 300px;
    	max-width: 300px;
    	height: 400px;
      background-color: rgba(0,0,0,0);
    	background-size: cover;
    	background-position: center;
    
    	transition: background-color .2s;
}
    
.armySelection:hover {
  background-color: rgb(0, 0, 0, 0.25);
}

【讨论】：

【解决方案4】：

我找到了解决方案，但它可能不是最干净的解决方案

HTML 部分：

<div class="army_selection_bloc">
    <div id="army1" class="army_selection"></div>
    <div class="army_text_bloc">
        <p class="army_text">Space marines</p>
    </div>
</div>

CSS 部分：

.army_selection_bloc
{
    margin: 20px;
    margin-left: 10px;
    margin-right: 10px;

    min-width: 300px;
    max-width: 300px;
    height: 400px;
}

.army_selection
{
    z-index: 2;
    position: relative;
    top: 0px;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    transition: 0.1s;
}

.army_selection_bloc:hover .army_selection
{
    box-shadow: 7px 7px 60px black;

    filter: brightness(25%);

    transition: 0.1s;
}

.army_selection_bloc:hover .army_text_bloc
{
    opacity: 1;

    transition: 0.2s;
}


.army_text_bloc
{
    z-index: 3;
    position: relative;
    top: -400px;

    width: 300px;
    height: 400px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 0;

    transition: 0.2s;
}

【讨论】：