div边框左上角的叠加图像答案

【问题标题】：Overlay image on div border top leftdiv边框左上角的叠加图像
【发布时间】：2013-06-20 13:11:20
【问题描述】：

我有一个边框为 1 像素的 div。我有一个比 div 48px * 48px 小得多的方形透明部分 png 图像。

我想定位方形图像，使其覆盖 div 的左上边框，从而使上边框和左边框看起来都位于图像下方。

使用 background-image 'left top' 将图像置于 div 边框内，这不是我想要的。希望我能举个例子，但我没有。希望我的问题能很好地描述它。

这是 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;
}

【问题讨论】：

为您的代码提供一个 jsFiddle 链接。
提供你的源代码
@DS。你的意思是这样的吗？ jsfiddle.net/9sn22/2阅读我的答案以获取更多信息
完美的外星人先生！现在看起来很明显！也许我现在应该去睡觉了！ :) 请将此作为单独的答案，以便我可以接受它作为答案，并且有一天它可能会帮助其他一些睡眠不足的灵魂。谢谢！
@DS。大声笑你欢迎:) 顺便说一句，我已经回答了你的问题，我猜你没有阅读我的答案

标签： html css

【解决方案1】：

因为没有图像或任何演示来达到您想要达到的预期效果，所以不会安静地提出您的问题，但据我了解，您可以将 position: relative; 用于容器 div 并使用文字 @987654324 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;
}

更新：（添加演示后）

你需要this之类的东西吗？

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

这是对 stackoverflow 上类似问题的解决方案。但是如果你看一下 JSFiddle，它是行不通的。