html - Overlay image on div border top left

Question

I have a div with a border of 1 px. I have a square transparent-in-parts png image much smaller than the div 48px * 48px.

I'd like to position the square image such that it overlays the top left border of the div giving the appearance of both top and left borders going underneath the image.

Using background-image 'left top' puts the image inside the div borders which is not what I'm looking for. Wish I could show an example but I don't have any. Hope my question describes it well.

Here's the JSFiddle: http://jsfiddle.net/9sn22/1/

<div id='mybox'>text</div>

#mybox {
text-indent: 0.5in;
background-image:url('http://aerbook.com/site/images/quote-mark-icon-black.png');
border-radius:3px;
border: 1px solid #cccccc;
height: 300px;
font-weight: 200;
text-indent: 0.35in;
padding: 20px;
background-repeat:no-repeat;
background-position: left top;
}

Answer 1

由于没有图像或任何演示来达到您想要达到的预期效果，因此不会安静地提出您的问题，但据我了解，您可以将position: relative;其用于容器div并在其中使用文字img标签，并分别与和一起div使用。position: absolute;top: -1px;left: -1px;

如果您试图background-image移出元素区域，那么这是不可能的......您需要使用img它

<div>
   <img src="#" />
</div>

div {
   position: relative;
   border: 1px solid #000;
}

img {
   position: absolute;
   left: -1px;
   top: -1px;
}

更新：（添加演示后）

你需要这样的东西吗？

Answer 2

你的意思是这样的吗？http://jsfiddle.net/q44k5/

html:

<div> </div>

CSS：

    div{
        border: 1px solid red;
        height: 100px;
        width: 100px;
        position: relative;
        margin: 50px;
    }

div:before{
    content: '';
    height: 20px;
    width: 20px;
    position: absolute;
    top: -10px;
    left: -10px;
    background: green;
}

Answer 3

在下面试试这个 CSS

#cLeft{
    position:absolute;
}
background: #ffffff url('http://spikyarc.net/images/down_Arrow.png') no-repeat top left;

试试下面这个 html

<img id="cLeft" src="http://spikyarc.net/images/down_Arrow.png" />
<div class="content">
  Your Text here.
</div>