在<div> border </div>的一部分上叠加图像

Question

我的<div>有一个统一的border: 15px

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

我想让图片显示在<div>

的左上角部分

但现有的border阻止了它。

有解决方案吗？

Answer 1

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

使用类Container

在div上方添加此PNG或GIF的图片标记

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

然后对于样式，只需使用Absulute位置，内容将置于该图像下。

#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的角落？