【问题标题】:Clip path polygon css in not working in firefox and internet explorer在 Firefox 和 Internet Explorer 中不工作的剪辑路径多边形 css
【发布时间】:2016-06-28 09:43:33
【问题描述】:

我想从右下角剪切图像,它已经完成,但它在某些浏览器中不起作用。有没有办法做到这一点?


注意:

悬停效果是必须的。


这里是代码。

.clip>a>img{
	-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 73% 100%);
}
.clip>a>img:hover{
	-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
}
<html>

<head>
  <title></title>
</head>


<body>
<div class="clip">
<a href="#">
<img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg">
</a>
</div>
</body>

</html>

谢谢。

【问题讨论】:

    标签: html css polygon


    【解决方案1】:

    简而言之:它在那里不起作用,因为您使用的 CSS 属性不属于他们(Firefox 和 IE)的渲染引擎。

    查看问题here 以查看有关它的信息性讨论。 要点是:webkit 是一个 Opera 渲染引擎,它也适用于 chrome,因为 chrome 的渲染引擎(Gecko)是基于 webkit 的。

    this css-tricks post 看来,为了获得最好的支持,您应该添加另一个不带 -webkit- 的 css 规则,但 它仍然无法支持所有浏览器(查看最后一段与文章中的浏览器支持摘要):

    .clip>a>img{
        -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 73% 100%);
        clip-path: polygon(0 100%, 0 0, 100% 0, 73% 100%);
    }
    .clip>a>img:hover{
        -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
        clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
    }
    

    重申一下:这将不会解决您使用 IE 和 Firefox 的问题,因为它们还不支持 clip-path 属性。你可以see the browser support here

    可能的解决方案

    除了在 IE 和 Firefox 中不做任何剪辑之外,您可以在 IE 和 FIrefox 中剪切矩形作为后备 - 为此您可以使用已弃用的

    clip: rect(10px, 20px, 30px, 40px);
    

    看看我上面链接的帖子 - 这是第一件事。正如他在那里写的那样——它是有限的(图像必须绝对定位,你只能将它用于矩形,但它基本上被所有浏览器支持,所以它是一个很好的后备)。因此,如果您可以从中获得后备设计,那就值得了解了。

    【讨论】:

      猜你喜欢
      • 2015-01-10
      • 1970-01-01
      • 2014-03-21
      • 2021-03-10
      • 2016-09-02
      • 2018-12-16
      • 2020-09-22
      • 1970-01-01
      • 2017-03-07
      相关资源
      最近更新 更多