jquery - 在没有 JS 的情况下在图像上创建插入透明覆盖？ (有反应)

Question

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

这是我的 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% 宽度 + 边框技巧将不起作用。
您应该使用 left、top、right 和 bottom 来调整叠加层的大小:

.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