7

In the below example, the div has a backdrop filter applied (because I want to have a blur effect on the part of the page's background that's covered by the div).

img {
  float: left;
}

div {
  background: rgba(255, 0, 0, .5);
  backdrop-filter: blur(8px);
}
<img src="https://placekitten.com/400/200" />
<h1>
  Title
</h1>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consequat est laoreet, pellentesque orci quis, faucibus nulla. Curabitur at augue ex. Pellentesque in nulla eleifend, porttitor dui a, commodo neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam quis lacinia libero, nec vehicula velit. Mauris sit amet malesuada tortor. Vestibulum volutpat mauris a ultricies bibendum. Mauris ornare dolor lectus, quis accumsan ligula ornare at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ut ipsum nulla. Quisque ante mauris, sagittis at orci sit amet, fermentum ullamcorper justo.
</div>

This results in the background of the div covering the img, which is not what I want.

When I remove the backdrop-filter in the CSS, the div becomes layered under the img, this is the behavior I'm looking for.

How can I keep the backdrop filter in my div while still having the img cover it?

Asleum
  • 73
  • 1
  • 5
  • the duplicate deals with clip-path but read until the end and you will see that backdrop filter behave the same – Temani Afif Aug 08 '20 at 08:11

1 Answers1

2

From the docs:

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element.

This means that the filter will not apply to the areas in front of the element. So for that just have a z-index property on your image with a non-static position

img {
  position: relative;
  z-index: 2; /* arbitrary value - the higher this is, the more the element will be on top of other elements */
}
95faf8e76605e973
  • 13,643
  • 3
  • 24
  • 51
  • Thanks for your reply. Yes, bringing the image to the front would solve my issue. However, adding a z-index as you suggest does not seem to have any effect, the image is still behind the div. Am I doing something wrong? https://jsfiddle.net/exw5fd4r/22/ – Asleum Aug 08 '20 at 06:08
  • yes, add a non-static `position` property such as `position: relative;`. `z-index` will not work with static elements – 95faf8e76605e973 Aug 08 '20 at 06:11
  • It works now, thank you so much! However I'm a bit curious as to why backdrop-filter messes up with layering to the point where I have to define a z-index manually even though it's a purely visual property. Guess I'll go read more about z-index and non-static positions! – Asleum Aug 08 '20 at 06:23