Question

我无法在网上找到任何信息来帮助我。使用Magnific Popup我想让我的弹出图像显示一个黑色边框。我进入了Magnific-popup.css文件并添加了以下内容：

/* 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; }

我得到的是显示区域的红色边框，在图像周围添加了黑色灰色边框。

以前有人这样做过吗？提前谢谢。

Answer 1

问题是由已设置为图像的填充引起的，请尝试使用以下边距替换填充：

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

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

Answer 2

我发现这样做的最好方法是从图像中删除填充并将其应用到图中的前后伪类上，如此

if (driver == null) {
    driver = new FirefoxDriver();
}

在Magnific Popup中围绕弹出图像放置一个黑色边框

2 个答案: