创建用于登录的模糊框

我正在为一位朋友设计一个登录页面，并且我试图在图像上制作一个模糊的框。这就是我要远，创建用于登录的模糊框

<html> 
<link rel="stylesheet" href="css/homepage.css"> 

<!-- Page starts here --> 

<body id="bg"> 
    <div class="center"> 
    <div id="image" class="image center"> 
     <img> 
    </div> 
    </div> 
</body> 
</html>

而CSS

#bg { 
    height: 100vh; 
    width: 100%; 
    background: url(http://www.funchap.com/wp-content/uploads/2014/02/amazing-horse-pictures.jpg) center no-repeat; 
    background-size: cover; 
    z-index: -2; 
    margin: 0; 
} 
.image { 
background-size: cover; 
height: 62%; 
width: 22.5%; 
-webkit-filter: blur(10px); 
-moz-filter: blur(10px); 
-o-filter: blur(10px); 
-ms-filter: blur(10px); 
filter: blur(10px); 
overflow: hidden; 
border-style: hidden; 
border-radius: 25px; 
border-color: transparent; 
} 
.image img { 
    background: url(http://www.funchap.com/wp-content/uploads/2014/02/amazing-horse-pictures.jpg) center; 
    background-size: cover; 
    overflow: hidden; 
    height: 300%; 
    width: 300%; 

} 
.center { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 
#logo { 
    z-index: 0; 
    width: 13%; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    position: absolute; 
    padding-bottom: 15%; 
}

我不知道为什么它不能在框中排队。欢迎任何帮助。

P.S.如果你想知道，马的图像是2560 x 1600。

在此先感谢。

来源

2016-08-23 Zach Melendez

这是什么呢：** ** 建议 – Mojtaba

看着你的图像配'代码img' - 你不能在一个空'img'标签设置背景属性和期待它的工作。将图片网址放在img标签的'src'属性中，或者使用带背景的块元素。 – chazsolo

您可以使用SVG效果。

`<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<defs> 
<filter id="blur"> 
<feGaussianBlur stdDeviation="5"/> 
</filter> 
</defs> 
</svg>`

Working Example

来源

2016-08-23 16:15:20

<div class="container"> 
<h2>Login</h2> 
<form> 
<input type="text" placeholder="Username"><br><br> 
<input type="password" placeholder="Password"><br><br> 
<input type="submit" value="Login"> 
</form> 
</div> 

css 

body{ 
background-image: url(Beautiful-White-Horse.jpg); 
background-size:cover; 
} 
.container{ 
width:300px; 
height:260px; 
background-color:rgba(0,0,0,0.4); 
margin:0 auto; 
margin-top:40px; 
padding-top:10px; 
padding-left:50px; 
border-radius:15px; 
-webkit-border-radius:15px; 
-o-border-radius:15px; 
-moz-border-radius:15px; 
color:#FFF; 
font-weight:bold; 
box-shadow:inset -4px -4px rgba(0,0,0,0.5); 
font-size:18px; 
} 
.container input[type="text"]{ 
width:200px; 
height:35px; 
border:0; 
border-radius:5px; 
-webkit-border-radius:5px; 
-o-border-radius:5px; 
-moz-border-radius:5px; 
padding-left:5px; 
} 
.container input[type="password"]{ 
width:200px; 
height:35px; 
border:0; 
border-radius:5px; 
-webkit-border-radius:5px; 
-o-border-radius:5px; 
-moz-border-radius:5px; 
padding-left:5px; 
} 
.container input[type="submit"]{ 
width:100px; 
height:35px; 
border:0; 
border-radius:5px; 
-webkit-border-radius:5px; 
-o-border-radius:5px; 
-moz-border-radius:5px; 
background-color:#0FF; 
font-weight:bold; 
}

来源

2016-08-23 17:49:05

请试试。可能你想要那样的东西。 –

创建用于登录的模糊框

回答

相关问题