我正在爲一位朋友設計一個登錄頁面,並且我試圖在圖像上製作一個模糊的框。這就是我要遠,創建用於登錄的模糊框
<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。
在此先感謝。
這是什麼呢:** ** 建議 – Mojtaba
看着你的圖像配'代碼img' - 你不能在一個空'img'標籤設置背景屬性和期待它的工作。將圖片網址放在img標籤的'src'屬性中,或者使用帶背景的塊元素。 – chazsolo