从具有相对位置的子元素中删除模糊效果

>我正在使用材质卡，想要使背景模糊，但不希望在div上产生模糊效果。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div style="background:url(https://www.allaboutbirds.org/guide/assets/og/75335251-1200px.jpg) center / cover;filter: blur(5px);z-index: 0;" class="remo-card-image mdl-card mdl-shadow--2dp">   
  <div class="mdl-card__title mdl-card--expand"></div>    
    <div class="mdl-card__actions">
      <span class="remo-card-image__filename">
        <button> 278728</button>
      </span>   
    </div>  
</div>

你可以看到片段，我想删除div mdl-card__actions模糊效果形式。

我尝试了以前的解决方案，但没有任何效果。

喜欢 - 删除子元素上的模糊效果

您应该将背景添加为div 旁边的div actions而不是父div。

试试这个

 .overlay { 
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
   }
  .mdl-card__actions { 
    z-index: 2;
  }

<body>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="remo-card-image mdl-card mdl-shadow--2dp">   
  <div class="overlay" style="background:url(https://www.allaboutbirds.org/guide/assets/og/75335251-1200px.jpg) center / cover;filter: blur(5px);z-index: 0;"></div>
  <div class="mdl-card__title mdl-card--expand"></div>    
    <div class="mdl-card__actions">
      <span class="remo-card-image__filename">
        <button> 278728</button>
      </span>   
    </div>  
</div>

相关内容

最新更新

热门标签：