Question

我需要在Pinterest风格的流体网格布局中对不同尺寸的图像实现this overlay effect。外边框宽度和插入'边界间隙'将是固定尺寸。图像本身会有所不同，需要流畅地回应。

这是我的JSfiddle：http://jsfiddle.net/th4229eL/120/

.inner-thumbnail-overlay {
position: absolute;
z-index: 1;
overflow: hidden;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
outline: 10px solid rgba(255, 255, 255, 0.5);
outline-offset: 5px;
margin-left: 15px;
margin-top: 15px; }

我无法弄清楚如何获得正确的宽度，以便叠加完全填充图像，而不会在右侧和底部溢出。

我也尝试过使用JQuery，但是当我调用它时，我可能正在做一些非常愚蠢的事情并且函数无效。

Answer 1

你想在叠加框上留有一些余量，所以100％宽度+边框效果不起作用您应该使用左，上，右和底来调整叠加层的大小：

.thumbnail-wrapper {
    width: 350px;
    position: relative;
}
.inner-thumbnail-overlay {
    position: absolute;
    /* 15px margin */
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    /* background */
    background-color: rgba(255, 255, 255, 0.5);
    /* outline */
    outline: 10px solid rgba(255, 255, 255, 0.5);
    outline-offset: 5px;
}
.archive-thumbnail {
    display: block;
    width: 100%;
}

Updated Fiddle

Answer 2

我尝试使用伪元素：

＆＃13;

div{
    position: absolute;
    width: 300px;
    height: 200px;
    background-color: yellow;
}
div::after {
    content: " ";
    position: absolute;
    left: 16px;
    top: 16px;
    right: 16px;
    bottom: 16px;
    outline: solid 6px blue;
}

＆＃13;

<div></div>

＆＃13;

在没有JS的情况下在图像上创建嵌入透明叠加（响应）

2 个答案: