移除具有相对位置的子元素的模糊效果 [英] Remove blur effect from child element with relative position
本文介绍了移除具有相对位置的子元素的模糊效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用材质卡，并且希望使背景模糊，但不希望对div产生模糊效果.
I am using material card and want to make background blur but don't want blur effect on a 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>
您可以看到该代码段，我想从mdl-card__actions div中删除模糊效果.
You can see the snippet, I want to remove blur effect form mdl-card__actions div.
我尝试过以前的解决方案，但对我没有任何帮助.
I have tried previous solutions but nothing worked for me.
like-去除对子元素的模糊效果
推荐答案
您应将背景作为div添加到actions div旁边，而不是作为父div.
You should add the background as div next to actions div not as parent 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>
这篇关于移除具有相对位置的子元素的模糊效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
