Issue
I can't manage to make backdrop-filter (blur)
work for some reasons...
I've already tried looking at this question and this question already asked, but couldn't figure it out and implement it in my case. I've also tried not nesting my items and just place them one above the other using position: absolute
but it gives exactly the same result.
If that can help I'm working on a React 18.2 + Tailwind 3.2 environment and tried to show you my issue using plain HTML / JS.
Here's a simplified version of my code :
#result {
/* Using a background image, but any image would do the job */
background-image: url("https://www.radiofrance.fr/s3/cruiser-production/2022/06/5f6ac5ab-37d9-4ca6-8f79-3694fcfec071/560x315_paysage-monet.webp");
width: 400px;
height: 200px;
z-index: 0;
}
#filter {
width: 400px;
height: 100px;
background-color: blue;
opacity: 0.3;
backdrop-filter: blur(6px);
z-index: 1;
}
<div id="result">
<div id="filter"></div>
</div>
Solution
You need to put your background-color with alpha value if you want to have a background with less opacity.
When you apply opacity
, it'll be applied to the whole element. So you need to remove the opacity
and change your background-color as below:
#result {
/* Using a background image, but any image would do the job */
background-image: url("https://www.radiofrance.fr/s3/cruiser-production/2022/06/5f6ac5ab-37d9-4ca6-8f79-3694fcfec071/560x315_paysage-monet.webp");
width: 400px;
height: 200px;
}
#filter {
width: 400px;
height: 100px;
background-color: rgba(255,255,255,.25);
backdrop-filter: blur(6px);
top:0;
left:0;
right:0;
}
<div id="result">
<div id="filter"></div>
</div>
Answered By - aflyzer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.