html - 在 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

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

看到这个小提琴。

.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

position: relative在您的容器 div上设置，并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。

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