Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.3k views
in Technique[技术] by (71.8m points)

html - Attach images on all four corner of DIV

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

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:

image to be placed no each corner

Outcome: outcome

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can do this with background images, without creating extra elements.

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

Also, you can combine the four corner images for faster downloads:

combined border images


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...