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

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