CSS3图像边框z-index [英] CSS3 image frame-border z-index

问题描述

我的图片有以下标记：

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

我得到这个结果：

>

我不喜欢，框架内的图像覆盖我的框架的一部分。

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

如何修改我的代码以获取框架显示 over 图片？

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

像这样：

推荐答案

图片的某些部分必须隐藏才能创建你要什么。

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

创建具有图像的主div和框架边框的另一个div。

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.

子div，而不是图像。这个子div应该具有与图像几乎相同的宽度和高度，并且 z-index 多于图像。

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.

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

更新：

我已经更新了真正的图像和适当的宽度和高度的小提琴。 Plz检查。

当您在图片上悬停时，会看到实际尺寸。这只是为了证明框架实际上是重叠的图像，这是你想要的。

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.

这篇关于CSS3图像边框z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！