当身体模糊时，如何在身体上显示元素？

Question

I have a problem, I'm trying to display div over the blurred body, but I can't really make it work. I've tried adding z-index to the div but it doesn't seem to be working.

Heres what I've tried:

 body { padding: 0; margin: 0; overflow: hidden; background: black; color: white; border: none; cursor: default; filter: blur(11px); } #foo { z-index: 10; } 

 <div id="foo"> Random Text </div> 

Answer 1

您始终需要为z-index ed选择器定义position

Answer 2

Since you have blurred the parent, all descendants will be blurred as well. To achieve a similar effect you have to:

• create and blur a div , say #bar , which will be a sibling to #foo instead.
• give #foo a higher z-index than #bar and ensure it's positioned (not position: static ) .

Example:

 /* ----- CSS ----- */ body { padding: 0; margin: 0; } #bar { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; background: black; color: white; border: none; cursor: default; filter: blur(11px); z-index: 0; } #foo { color: red; position: relative; z-index: 10; } 

 <!----- HTML -----> <div id="bar"></div> <div id="foo"> Random Text </div> 

Answer 3

The Random text is black just like the body background and you should define the body z-index lower than #foo. Hopes this helps :)