[英]magnific popup: Why doesn't border radius work on the image and how can i make it work?
I have the magnific popup plugin and i want the images in it to have a border radius but i can't seem to get it working. 我有一个宏伟的弹出式插件,我希望其中的图像具有边框半径,但我似乎无法使其正常工作。
le CSS 文件
img.mfp-img {
border-radius: 5px;
}
le HTML HTML文件
<div class="top">
<a class="overlay mgp-img" href="images/image-standard-1-lg.jpg">
<i class="fa fa-search md"></i>
</a>
<a href="#"><img class="img-responsive" src="images/image-standard-1.jpg" alt="a"></a>
</div>
This is my code. 这是我的代码。 I also tried to use overflow:hidden but i still got no results.
我也尝试使用溢出:隐藏,但仍然没有结果。
I noticed some of you mentioned using vendor prefixes. 我注意到有些人提到使用供应商前缀。 That doesn't work either, i think it has something to do with the plugin itself and not the css.
那也不起作用,我认为它与插件本身有关,而不与CSS有关。
Remove the padding from the img.mfp-img
selector: 从
img.mfp-img
选择器中删除填充:
img.mfp-img {
padding: 0;
margin: 40px auto;
border-radius: 10px;
}
It's a good idea to put the 40px
value on the margin, or you caption will stay on top of the image. 将
40px
值放在边距上是个好主意,否则标题将停留在图像顶部。
By default .mfp-figure::after
has a background-color
and a box-shadow
, so you should remove it or apply the border-radius
here too. 默认情况下
.mfp-figure::after
具有background-color
和box-shadow
,因此您应该将其删除或在此处应用border-radius
。
.mfp-figure::after {
background: transparent;
border-radius: 10px;
}
Hope that helps. 希望能有所帮助。
Here is an example of border radius in action: http://jsfiddle.net/CdES2/ 这是一个实际的边界半径示例: http : //jsfiddle.net/CdES2/
HTML: (using random image from google) HTML :(使用来自Google的随机图片)
<img src="http://fullwallpaper.tk/wp-content/uploads/kitten-3.jpg" style="width: 50%; height: 50%;"/>
CSS: CSS:
img {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
Output: 输出:
Try adding adding vendor prefix before the border-radius. 尝试在边界半径之前添加供应商前缀。
img.mfp-img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.