如何在HTML中將一個圖像置於另一個圖像的頂部

-4

如何在HTML/CSS中執行此操作？（請檢查圖像）如何在HTML中將一個圖像置於另一個圖像的頂部

2017-09-03 Mehedi

歡迎來到Stack Overflow。請回顧[我如何問一個好問題]（https://stackoverflow.com/help/how-to-ask）。這不是一個代碼編寫服務， - 預計你已經研究了你的問題，並且很好地嘗試自己編寫代碼。如果您遇到某些特定問題，請回過頭來，在[Minimal，Complete和Verifiable示例]（https://stackoverflow.com/help/mcve）中包含您嘗試過的內容以及相關代碼的摘要，以便我們可以幫幫我。 – FluffyKitten

爲什麼你不看那個頁面的HTML和CSS，看看他們是怎麼做到的？ – David

關於HTML + CSS的最好的事情是每個人都有他們的來源可供檢查。 – tadman

下面是我爲我的網站（它幾乎沒有從實際代碼改變，所以有很多的無用的東西在CSS）。所有你需要做的就是複製/粘貼此文字並插入圖片的網址。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <style> 
 
.div1{ 
 
\t border-style: hidden; 
 
\t background-image: url("yourImage.jpg"); 
 
\t background-color: red; 
 
\t background-size: 100% 100%; 
 
\t position: absolute; 
 
\t right: 0px; 
 
\t left: 0px; 
 
\t top: 10%; 
 
\t z-index: -2; 
 
\t padding: 10%; 
 
\t margin:0px; 
 
} 
 
.div2{ 
 
\t position: relative; 
 
\t top: 50%; 
 
\t background-color: rgba(153,194,255,0.8); 
 
\t z-index: 1; 
 
\t padding-right: 50px; 
 
\t padding-left: 50px; 
 
\t height:300px; 
 
\t width: 60%; 
 
\t min-width: 300px; 
 
\t margin: auto; 
 
} 
 

 
.myText{ 
 
\t margin: auto; 
 
\t padding: 50px; 
 
\t text-align: center; 
 
\t font-size: 1.5em; 
 
\t font-family: Verdana,sans-serif; 
 
\t width: 80%; 
 
\t height: 100%; 
 
} 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div class="div1"> 
 
\t <div class="div2"><p class="myText">hey</p></div> 
 
\t </div> 
 
\t 
 
</body> 
 
</html>

下一次，也許多做一點研究，但嘿...大家都懶過一段時間，對吧！？

來源

2017-09-03 19:38:34

如何在HTML中將一個圖像置於另一個圖像的頂部

回答

相關問題