如何使這種類型的圖像使用XHTML css彈出框

如何使這種類型的圖像使用XHTML css彈出框。不使用沿着整個框圖像作爲背景如何使這種類型的圖像使用XHTML css彈出框

alt text http://shup.com/Shup/330963/1104592352-My-Desktop.png

唯一的地球圖像將是圖像。

2010-05-05 Jitendra Vyas

地球儀需要是一個透明PNG，然後風格的框忽略圖像，填充和邊框，以獲得所需的外觀。然後，重擊位置：相對於盒子，位置：絕對在它內部的圖像上。然後使用top：Xpx; left：Xpx;隨心所欲地定位圖像。

編輯：我已經從siulamvictor下面的代碼，並編輯它，所以它會爲你工作。

<html> 
<head> 
<style type="text/css"> 

.box { 
    position: relative; 
    width: 260px; 
    border: #000 1px solid; 
    background: #d5d5d5; 
    padding: 20px; 
} 

.box img { 
    display: block; 
    position: absolute; 
    z-index: 2; 
    top: 5px; 
    right: 5px; 
} 

</style> 
</head> 

<body> 

<div class="box"> 
    Text here. 
    <img src="image.png" /> 
</div> 
</body> 

</html>

根據需要更改頂部和右側屬性以將圖像定位。

來源

2010-05-05 08:41:05 Tom

@thebluefox - 由於它wotking但這裏一個問題，如果文本較長然後它背後的形象 – 2010-05-05 10:00:14

把文字變成AP標籤，然後給p標籤一個寬度和顯示塊，它會包裝到多行然後。或者，你必須使盒子變寬。請注意，當文字行數增加時，您的圖片將會移動，具體取決於您將其定位在哪一側。 – Tom 2010-05-05 10:21:35

試試這個:)

<html> 
<head> 
<style type="text/css"> 

.box { 
    position: relative; 
    width: 300px; 
    border-color: black; 
    border-width: 1px; 
    border-style: solid; 
    background-color: #d5d5d5; 
    height: 60px; 
    padding-top: 20px; 
    padding-left: 20px; 
} 

.image { 
    display: block; 
    position: absolute; 
    z-index: 2; 
    right: 20px; 
} 

</style> 
</head> 

<body> 

<div class="box"> 
Text here. 
<img src="image.png" class="image" /> 
</div> 
</body> 

</html>

來源

2010-05-05 08:43:29

我不能給位置：絕對;到框 – 2010-05-05 08:50:36

你能告訴我們你的代碼嗎？ – 2010-05-05 08:58:29

你需要圖像上的絕對位置，並在盒子上相對位置，你有他們錯誤的方式。此外，使用填充獲得高度，而不是高度屬性。 – Tom 2010-05-05 09:17:04

<div class="globe-box">Some text<div class="globe"></div></div> 

.globe-box { 
    position: relative; 
    border: 1px solid black; 
    padding-right: 110px; /* width of globe + some padding */ 
    margin-bottom: 20px; /* how much globe should stick out of the bottom */ 
} 

.globe-box .globe { 
    width: 100px; height: 100px; /* size of globe */ 
    background-image: url(globe.png); 
    position: absolute; 
    bottom: -20px; /* same as margin-bottom above only negative */ 
    right: 10px; 
}

來源

2010-05-05 08:44:02 RoToRa

如何使這種類型的圖像使用XHTML css彈出框

回答

相關問題