用于背景图像模糊的 css 技巧
[英]css tricks for background image blur
问题描述
i want to blur the background image only but it has made the content blur also and i tried to set up the z-index i guess its not working here is the html and i need the solution with explanation please:
我只想模糊背景图像，但它也使内容模糊，我试图设置 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>
here is the css file:这是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;
}
2 个解决方案
解决方案1
2 已采纳 2015-06-14 19:02:20
I believe that FireFox's 3Ddomviewer could help illustrate whats going on here.我相信 FireFox 的3Ddomviewer可以帮助说明这里发生了什么。 Moreover, what everyone is trying to say is that the blur is being applied to the main-form id as well b/c its a child of the body div that you are applying it to.此外，每个人都想说的是，模糊被应用于main-form id以及 b/c 它是您正在应用它的 body div的子元素。 Now, as for why z-index is not working (****Crackes knuckles****).现在，至于为什么 z-index 不起作用（****Crackes knuckles****）。 Okay, so z-index ONLY WORKS ON ELEMENTS THAT HAVE A POSITION!好的，所以 z-index 仅适用于具有位置的元素！ in your main-form div the position isn't set to anything once you give it a position and set z-index to some large negative number it will disappear as it is being hidden by all of the other elements stacked on top of it.在您的主表单 div 中，一旦您给它一个位置并将 z-index 设置为某个大的负数，它就会消失，因为它被堆叠在它上面的所有其他元素隐藏。 See this article for more info.有关更多信息，请参阅这篇文章。 I hope that helps.我希望这有帮助。
解决方案2
0 2015-06-14 18:36:34
That is because you said: -webkit-filter: blur(5px) and filter: blur(5px) in the body selector, that will blur the entire page... you only want to blur an image, so do this:那是因为你在 body 选择器中说： -webkit-filter: blur(5px)和filter: blur(5px) ，这将模糊整个页面......你只想模糊图像，所以这样做：
#imageSelector {
-webkit-transform: blur(5px);
transform: blur(5px);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.