Question

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

我想定位方形图像，使其覆盖div的左上边框，使图像下方的顶部和左边框都显示出来。

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

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

更新:(添加演示后）

你需要像this这样的东西吗？

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>

在左上角的div边框上叠加图像

3 个答案: