Question

我的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>

Answer 1

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

MDN reference

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

仔细考虑有限的支持；如果没有此特定属性，则可以实现相同的效果。一个示例workaround。

Answer 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>

Answer 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);
}

Answer 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;
}

背景过滤器问题

4 个答案: