CSS3 image frame-border z-index

问题

I have the following markup for my images:

img.framed
{
    border-image: url('../images/design/frame.png') 40 40 40 40 stretch stretch;
    border-color: #f4be52; border-style: inset; border-width: 40px;
}

And I am getting this result:

I don't like, that image inside frame overrides part of my frame.

How can I modify my code to get frame displayed over the image?

Like that:

回答1:

Some part of the image would have to be hidden to create what you want.

Create the main div that has your image, and another div for frame border.

This main div is relatively positioned, so that absolutely positioned elements inside it are relative to it.

Apply your frame border background to child div, and not the image. This child div should be almost the same width and height of image and z-index more than image. Also, position it slightly top and left to image.

<div class="main">
    <div class="image-container">
    <!-- does not actually contain the image -->
    </div>
    <img src="some image"/>
</div>

JS Fiddle

I used plain borders to show overlap. The green border overlaps the yellow bg of image.

Here's the CSS:

.main {
    position: relative;
    top: 100px;
    left: 10%;
}
.image-container {
    position: absolute;
    left: -70px;
    top: -70px;
    border: 20px solid rgba(25,255,25, 0.5);
    z-index: 5;
    width: 230px;
    height: 330px;
    border-image: url('your frame link') 90 90 90 90 stretch stretch;
    border-color: #f4be52;
    border-style: inset;
    border-width: 86px;
}
img {
    position: absolute;
    background: #eaff77;
    width: 260px;
    height: 360px;
    z-index: 1;
}
.main:hover > img {
    z-index: 10;
}

Update:
I have updated the fiddle with real images and proper width and height. Plz check.
When you hover on the image, you see the real size. This is just to prove that the Frame is actually overlapping the image, which is what you wanted.

来源：https://stackoverflow.com/questions/12609425/css3-image-frame-border-z-index

标签

css3

border