1. Recently, when I styled a form, I wanted the background of the form to be ground glass, so I used filter:blur () to set it.
the code structure is
<body id="index-bg">
<section id="the-form">
<div id="container">
blur
</div>
</section>
</body> css style is:
-sharpthe-form{
width: 600px;
height: 300px;
display: block;
position: relative;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -300px;
border-radius: 10px;
background: inherit;
font-family: my-font;
font-size: 30px;
}
-sharpthe-form > div {
display: block;
z-index: 10;
}
-sharpthe-form:after{
content: "";
/**/
width: 100%;
height: 100%;
position: absolute;/**/
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 5;
/**/
background: inherit;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
filter: blur(15px);
} but no matter how you set z-index , the pseudo element is always above the text within < div id= "container" > :
what"s going on?
there is also a question: the width:100% of pseudo elements doesn"t work, so why does it affect the size of the ground glass (that is, its own size)?
Thank you here!
