在Magnific Popup弹出图像周围放置单个黑色边框

我一直无法在网上找到任何信息来帮助我。使用Magnific Popup我希望我的弹出图像以单个黑色边框显示。香港专业教育学院已经进入Magnific酒店的-popup.css文件，并添加以下内容：在Magnific Popup弹出图像周围放置单个黑色边框

/* Main image in popup */ 
img.mfp-img { 
    width: auto; 
    max-width: 100%; 
    height: auto; 
    display: block; 
    line-height: 0; 
/*my attempt at adding a border around the image */ 
    **border: 2px solid red;** 
/* end attempt */  
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 40px 0 40px; 
    margin: 0 auto; }

什么，我得到的是在显示区域中的红色边框，加上黑色的边框灰色图像周围。

有没有人做过这个？提前致谢。

来源

2014-08-29 Karen Ann Palmer

的问题是由已被设置为图像填充造成的，尝试用保证金更换填充像这样：

img.mfp-img { 
    padding: 0; 
    margin: 40px auto; 
    /*Add your border*/ 
    border: 2px solid red; 
}

而且我必须指出，修改的核心文件进行任何插件被认为是不好的做法因为它使升级到更新版本更困难，所以我建议你创建一个单独的CSS文件来覆盖或添加任何自定义样式。

来源

2014-08-29 17:10:07

这是问题。也谢谢你的建议。按照您的建议将样式更改移至单独的CSS文件。 – 2014-08-30 18:43:57

这不是最好的解决方案。不是我可以拿出更好的一个。此解决方案将图像推到屏幕下边界下方，即无法看到整个图像。看起来很傻，这个脚本不能让我们做一些简单的事情，比如添加边框。 – 2015-01-02 14:50:44

我发现做到这一点，最好的办法是从图像中去除填充，并将其应用到之前和之后的伪类的人物，像这样

img.mfp-img { 
    padding: 0; 
    border: 2px solid red; 
    } 

    .mfp-figure figure::before { 
    padding-top: 40px; 
    display: block; 
    content: ""; 
    } 

    .mfp-figure figure::after { 
    padding-bottom: 40px; 
    display: block; 
    content: ""; 
    }

来源

2016-02-21 18:52:24 Nickfmc

在Magnific Popup弹出图像周围放置单个黑色边框

回答

相关问题