疊加圖像

Question

我有一個<div>具有均勻border: 15px

的的jsfiddle是http://jsfiddle.net/user1212/e7Gez/2/

我試圖讓圖像出現在的<div>

左上部分

但是現有border正在阻止它。

有沒有解決方案？

Answer 1

如果你能夠讓GIF這種形象PNG，使白色隱形這裏是我的解決方案

添加圖片標籤與此PNG或GIF與類容器

<img id="cornerLeft" src="http://smitra.net76.net/post-bg.jpg" /> 
<div class="content"> 
    Text Goes here 
</div> 

股利上方。然後對風格，只是使用絕對定位和內容將自己置於該圖像下。

#cornerLeft{ 
    position:absolute; 
} 

而且我也從內容類

background: #ffffff url('http://smitra.net76.net/post-bg.jpg') no-repeat top left; 

Answer 2

不知道刪除它與圖片中的背景，如果你需要的是一個背景，但是這將是我在它的嘗試。

HTML

<div class="content"> 
    <img src="http://smitra.net76.net/post-bg.jpg" /> 
    Text Goes here 
</div>​ 

CSS

img { 
    position: relative; 
    top: -15px; 
    left: -15px;  
} 

因爲它看起來像你實際上並不需要它是一個背景，但對於DIV的角落的東西嗎？