Question

我想模糊背景图片，但它也使内容模糊了，我试图设置z-index我猜它不工作这是html，我需要解决方案，请说明：

    <!DOCTYPE html>
<html>
<head>
    <title>Student-login</title>
    <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="body">
        <div class="main-form">
            <h1>Student Login</h1>
            <form class="login">
                <input type="text" placeholder="*User name" name="user_name"></input><br>
                <input type="password" placeholder="*Password" name="user_name"></input><br>
                <input type="button" value="Login"></input><br>
                <div class="button"><a href="register.html">Register</a></div>
            </form>
        </div>
    </div>
</body>
</html>

这是css文件：

.body{

            position: absolute;
            top: -20px;
            left: -20px;
            right: -40px;
            bottom: -40px;
            width: auto;
            height: auto;
            background-image: url("background.jpg");
            background-size: cover;
            -webkit-filter: blur(5px);
            filter:blur(5px);
            z-index: 0;
}
h1{
    font-family: 'Shadows Into Light', cursive;
    color: #282828;
    text-align: center;
    margin: 2%;
}
.main-form{
    float: right;
    margin-top: 3%;
    height:auto;
    border-radius: 3px;
    background:#F0F0F0;
    opacity: .6;
    padding-top: 1%;
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 1%;
    z-index: 1;
}
.login input[type="text"]{

    width: 260px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
}
.login input[type="text"]:focus{

    border: 1px solid #0033FF;
}

.login input[type="password"]{

    width: 260px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
}
.login input[type="password"]:focus{

    border: 1px solid #0033FF;
}

.login input[type="button"]{

    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login input[type="button"]:hover{

    background-color: #404040;
    color: white;
}
.button {

    width: 270px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    color:black;
    text-align: center;
}
.button a{

    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    color:black;
    text-align: center;
}
.button:hover{

    background-color: #404040;
}
.button:hover a{

    color: white;
}

.login select{

    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login select:hover{

    background-color: #404040;
    color: white;
}
::-webkit-input-placeholder {
   color: red;
}
:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Answer 1

我相信FireFox的3Ddomviewer可以帮助说明这里发生的事情。此外，每个人都想说的是，模糊正在应用于main-form id以及b / c它正在应用它的身体div的孩子。现在，至于为什么z-index不起作用（**** Crackes knuckles ****）。好的，所以z-index只适用于有位置的元素！在你的主格式div中，一旦你给它一个位置并且将z-index设置为某个大的负数，它就不会被设置为任何东西它将会消失，因为它被堆叠在它上面的所有其他元素隐藏。有关详细信息，请参阅this文章。我希望有所帮助。

Answer 2

那是因为你在身体选择器中说：-webkit-filter: blur(5px)和filter: blur(5px)会模糊整个页面......你只想模糊图像，所以这样做：

#imageSelector {
    -webkit-transform: blur(5px);
    transform: blur(5px);
}

背景图像模糊的css技巧

2 个答案: