Question

你好我在弹出的图像上添加了一个图像，它没有完全填充img的宽度和高度，看起来很酷。

我也想在所有弹出图像周围添加相同的6px边框，到目前为止，我能够获得图像和标题并在边框中关闭，这不是我所追求的。

如果你去这里

http://dagrafixdesigns.com/2019/industrial-darker/graphics.html

然后点击 Rafters 标签，然后点击 PIGSKIN 的图片，您会看到一个漂亮的边框和BG图像弹出....我的代码< / p>

fetchPlaces()

如果您关闭并单击“头盔”选项卡，然后单击头盔，则会弹出一个没有边框的图像。

是否只有一个元素可以包装图像？还是一个伪类::抓住它？

谢谢

Answer 1

尝试使用此代码代替您的代码：

.mfp-figure::after {
    /*border: 6px solid #333;*/
    bottom: 40px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    content: "";
    display: block;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
    width: auto;
    z-index: 1; /*above the image*/
}

它使图像上方的边框。如果您仍然希望背面有背景，请使用带有以下代码的before元素：

.mfp-figure::after {
    background: #181818 none repeat scroll 0 0;
    bottom: 40px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    content: "";
    display: block;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
    width: auto;
    z-index: -1;
}

弹出图像在灯箱上的边框

1 个答案: