在DIV的四个角上附加图像

Question

我有一个DIV，周围有一个红色虚线边框：

DIV的HTML：

    <div id="certificate" style="text-align:center;display:none;">
<img src="imgflo_topleft.png" id=img1 />
<img src="imgflo_bottomleft.png" id=img2 />
<img src="imgflo_topright.png" id=img3 />
<img src="imgflo_bottomright.png" id=img4 />

//OTHER texts will go here but it should not interfere with the images
    </div>

CSS：

#certificate {
    width: 900px;
    margin: 0px auto;
    border: 2px dotted red;
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
}

要放在DIV每个角落的图像：

结果：

Answer 1

您可以使用背景图像执行此操作，而无需创建额外的元素。

请参阅this fiddle。

.cert {
  min-width: 212;
  min-height: 166;
  background: 
    url(http://i.stack.imgur.com/ghI7u.png) left -106px top -83px no-repeat, 
    url(http://i.stack.imgur.com/ghI7u.png) right -106px top -83px no-repeat, 
    url(http://i.stack.imgur.com/ghI7u.png) left -106px bottom -83px no-repeat, 
    url(http://i.stack.imgur.com/ghI7u.png) right -106px bottom -83px no-repeat, 
    white;
  padding: 40px;
}

此外，您可以组合四个角落图像以加快下载速度：

Answer 2

在容器div上设置position: relative，并在图片上position: absolute与top，bottom，left和right一起设置像素值，即：

#img2 { position: absolute; bottom: 0px; left: 0px; }

从页面流中删除绝对定位的元素，因此不会干扰容器div中的任何其他元素（文本，其他图形，标题等）。

或者，如果您的容器div是固定的（设置像素值）大小，只需使用background-image代替所有四个角落图像，并节省一些页面加载时间。

Answer 3

如果您的div具有固定宽度，则可以使用两个div和两个背景图像来管理它：

HTML：

<div class="topDiv">
     <div class="botDiv">
           content goes here
     </div>
</div>

CSS：

.topDiv {
    background: url( topImage.gif ) center top no-repeat;
}
.botDiv{
    background: url( bottomImage.gif) center bottom no-repeat;
}

如果您的div具有流体宽度，您可以使用相同的技术，但随后使用四个div。

这不是干净的方法，但它有效。