css技巧为背景图像模糊

问题描述：

我只想模糊背景图像，但它已使内容模糊也，我试图设置z-index我猜它不工作这里是html和我需要的解决方案与解释，请：css技巧为背景图像模糊

<!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; 
}

http://codepen.io/akademy/pen/FlkzB – johnnyarguelles

我已经看到它，但我想找出由于我的代码使整个事情模糊的特定原因。@ johnnyarguelles –

答

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

真的非常感谢@ coderrick这真的有助于解决问题。 :) –

太棒了！没问题。 – coderrick

答

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

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

对不起，可能我没有得到你在这里我使用名称正文为一个部门和问题在于我可以得到的z-index属性，但我想知道z-index属性不起作用的原因？@Viraj Shah –

因此，你会需要为'.main-form'设置一个位置，因为z-index只会应用于具有已定义位置的元素 –

css技巧为背景图像模糊

相关推荐