在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彈出圖像周圍放置單個黑色邊框

回答

相關問題