如何將圖像放置在CSS中的表單下方

我正在創建登錄頁面，並且將自定義圖像邊框放置到表單下方的中心。如何將圖像放置在CSS中的表單下方

圖像沒有正確定位到margin-left。

任何人都可以提出解決方案嗎？

下面是代碼：

@import url(http://fonts.googleapis.com/css?family=Droid+Sans); 
 
@import url(http://fonts.googleapis.com/css?family=Roboto); 
 
* { 
 
    text-align: center; 
 
} 
 
img { 
 
    z-index: -1; 
 
    width: 350px; 
 
    height: 200px; 
 
    margin-top: 200px; 
 
    background-size: cover; 
 
    position: absolute; 
 
} 
 
body { 
 
    background-color: #ecf0f1; 
 
} 
 
#username { 
 
    margin-top: 250px; 
 
    margin-bottom: inherit; 
 
    margin-right: inherit; 
 
    width: 250px; 
 
    height: 35px; 
 
    font-size: 20px; 
 
    font-family: 'Droid Sans', serif; 
 
    border: 0px solid; 
 
    background-color: transparent; 
 
} 
 
#username:focus { 
 
    outline: none; 
 
} 
 
#password { 
 
    margin-top: 5px; 
 
    margin-bottom: inherit; 
 
    margin-right: inherit; 
 
    width: 250px; 
 
    height: 35px; 
 
    font-size: 20px; 
 
    font-family: 'Droid Sans', serif; 
 
    border: 0px solid; 
 
    background-color: transparent; 
 
} 
 
#password:focus { 
 
    outline: none; 
 
} 
 
#submit { 
 
    margin-top: 35px; 
 
    border: 0; 
 
    background: url(submit1.png); 
 
    background-repeat: no-repeat; 
 
    width: 200px; 
 
    height: 50px; 
 
    border: 0; 
 
} 
 
#submit:focus { 
 
    outline: none; 
 
} 
 
#submit:hover { 
 
    background-image: url(submit2.png); 
 
} 
 
#footer { 
 
    clear: both; 
 
    position: relative; 
 
    z-index: 5; 
 
    margin-top: 17em; 
 
    background-color: transparent; 
 
    font-family: 'Roboto', serif; 
 
    color: #bdc3c7; 
 
    height: 20px; 
 
    font-size: 10px; 
 
}

<div id="main"> 
 
    <div id="login"> 
 
    <form action="Scripts/xxx.php"> 
 
     <img src="border_transparent.png"> 
 
     <input id="username" type="text" name="username" placeholder="Enter Username" /> 
 
     <br> 
 
     <input id="password" type="password" name="password" placeholder="Enter Secret Password" /> 
 
     <br> 
 
     <button id="submit" value="" /> 
 
    </form> 
 
    </div> 
 
</div> 
 
<div id="container"> 
 
    <div id="content"></div> 
 
</div> 
 
<div id="footer">&copy; Project Blackhat Operatives 2015</div>

這是目前我的頁面的外觀：http://s7.postimg.org/vvfi8m1uj/Screen_Shot_2015_01_11_at_7_07_21_PM.png

這就是我想要的頁面看起來像：http://s11.postimg.org/avy2caylv/Screen_Shot_2015_01_11_at_7_09_01_PM.png

來源

2015-01-11 MarcB1

你能解釋一下嗎？或者創建一個你想要做什麼的圖像？ – jmore009

你已經發布了兩次相同的圖片 – adriano66

我道歉@ adriano66。我這次發佈了正確的圖片。 – MarcB1

它是居中，問題是背後的背景圖像，你是絕對定位。這不集中，你可以添加left: 50%和陰性切緣，使其恢復到中心（left位置從角落裏不是中心）：

img { 
    z-index: -1; 
    width: 350px; 
    height: 200px; 
    background-size: cover; 
    position:absolute; 
    left: 50%; //add 
    margin: 200px 0 0 -175px; //add 
}

FIDDLE

什麼，你應該做的儘管將該圖像作爲background-image添加到您的form或#login集裝箱中。定位img標籤並不是處理此問題的好方法。

來源

2015-01-11 23:46:02 jmore009

非常感謝！這解決了這個問題。我會記住背景圖像:) – MarcB1

嘗試

#submit:hover { 
background-image: url("submit2.png"); 
}

需要報價/雙引號。

來源

2015-01-11 23:22:05

我不認爲這是問題。 OP沒有提及破碎的圖像路徑 – jmore009

如何將圖像放置在CSS中的表單下方

回答

相關問題