在DIV的所有四个角上附加图像

问题描述

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

DIV的HTML：

 < div id =certificate style =text-align：center; display：none;> 
< img src =imgflo_topleft.pngid = img1 /> 
< img src =imgflo_bottomleft.pngid = img2 /> 
< img src =imgflo_topright.pngid = img3 /> 
< img src =imgflo_bottomright.pngid = img4 /> 
 
 //其他文本将在这里，但不应该干扰图像
< / div> 
  

CSS：

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

要放置在DIV每个角落的图片：

结果：

解决方案

在容器div和上设置 position：relative position：absolute 在顶部，底部，左和 right 像素值，即：

  img2 {position：absolute; bottom：0px; left：0px; } 
  

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

或者，如果你的容器div是一个固定（设置像素值）大小， c $ c> background-image ，而不是为所有四个角落图片，并保存自己一些页面加载时间。

I have a DIV which has a red dotted border all around:

HTML for the DIV:

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

Image to be placed on each corner of DIV:

Outcome:

解决方案

Set position: relative on your container div, and position: absolute on the images in conjunction with top, bottom, left, and right pixel values, i.e:

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

Absolutely positioned elements are removed from the page flow and thus won't interfere with any other elements inside the container div (text, other graphics, headings and so on).

Or, if your container div is a fixed (set pixel value) size, just use background-image instead for all four corner images and save yourself some page loading time.

这篇关于在DIV的所有四个角上附加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！