ログイン用のぼかしボックスの作成

友人用のログインページをデザインしていますが、画像上にぼかしたボックスを作成しようとしています。これは私が、私はそれがボックスに並んでいない理由はわからない遠く、ログイン用のぼかしボックスの作成

<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

は '.image img'のためにあなたのコードを見て提案する - あなたは空の' img'タグに背景のプロパティを設定することはできませんし、それが動作することを期待してください。イメージURLを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

試してみてください。そのようなものが欲しいかもしれません。 –

ログイン用のぼかしボックスの作成

答えて

関連する問題