CSS中的重疊圖像

如何讓「mymessage.gif」顯示「bread_wine.jpg」。CSS中的重疊圖像

mymessage.gif具有透明背景。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>overlap images</title> 
<style type="text/css"> 
<!-- 
#navbar { 
    font-size: 18px; 
    font-weight: bold; 
    text-align: center; 
} 
#thebigimage { 
    background-image: url(bread_wine.jpg); 
    height: 548px; 
    width: 731px; 
    margin-right: auto; 
    margin-left: auto; 
} 
#overlapthis { 
    background-image: url(mymessage.gif); 
} 
--> 
</style> 
</head> 
<body> 
<div id="navbar">this is the nav bar</div> 
<div id="thebigimage"> 
<div id="overlapthis"></div> 
</div> 
</body> 
</html>

來源

2010-10-24 MP123

#overlapthis { 
    background-image:url("mymessage.gif"); 
    height:100px; 
    left:50px; /* play around with this */ 
    position:absolute; 
    top:90px; /* and play around with this */ 
    width:500px; 
} 

#thebigimage { 
    background-image:url("bread_wine.jpg"); 
    height:548px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; /* and this has to be relative */ 
    width:731px; 
}

來源

2010-10-24 21:55:19 Claudiu

工作完美！非常感謝！ – MP123 2010-10-24 22:00:38

不用擔心朋友，隨時。希望你明白髮生了什麼:) – Claudiu 2010-10-24 22:02:47

'background-size：80px ?? px;'可以用來指定圖像的大小。 – Anirudh 2013-03-20 15:53:55

嘗試

#overlapthis { 
    position: absolute; 
    top: ??px; 
    left: ??px; 
    z-index: 1; 
}

來源

2010-10-24 21:51:55

在我的情況下，z-index是重要的參數。謝謝！ – Aamol 2016-09-29 02:05:18

當你擁有了它，現在，圖像已經重疊。你不能看到它，因爲你沒有添加大小到你的overlapthis div。試試這個：

#overlapthis { 
    background-image: url(mymessage.gif); 
    width: 500px; 
    height: 100px; 
}

然後添加頁邊距（和一個位置：絕對）來定位圖片到您想要的位置。

來源

2010-10-24 21:56:27 Kablam

CSS中的重疊圖像

回答

相關問題