html - 在部分上叠加图像边界

Question

我有一个<div>带制服的border: 15px

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

我试图让图像出现在左上角<div>

然而，现有的border正在阻止它。

有解决办法吗？

Answer 1

如果你可以制作这个 gif 的 Image png 并使白色不可见，这是我的解决方案

使用类 Container 在 div 上方添加带有此 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 角落的东西？