Question

我已按照这些说明制作剪裁形状 http://www.guestandguest.com/blog/posts/crop-your-images-in-css-instead-of-using-svg

这是我的代码

CSS

div#offer {
overflow:hidden;  
width:2028px;  
height:985px;  
margin-top:-765px;  
position:relative;  
/*Chrome,Safari*/  
-webkit-clip-path: polygon(2028px 830px,0px 985px,0px 0px,2028px 0px);  
-ms-clip-path: polygon(2028px 830px,0px 985px,0px 0px,2028px 0px);  
/*Firefox*/  
clip-path: polygon(2028px 830px,0px 985px,0px 0px,2028px 0px);  
clip-path: url('#clipoffer');  

/* iOS support inline encoded svg file*/  
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTIwMjgsODMwIEwwLDk4NSAwLDAgMjAyOCwwIHoiLz4KICA8L2NsaXBQYXRoPgogIDxwYXRoIGlkPSJzdmdNYXNrIiBkPSJNMjAyOCw4MzAgTDAsOTg1IDAsMCAyMDI4LDAgeiIgIC8+Cjwvc3ZnPg==) no-repeat;  }

和HTML

 <div id="offer">
            <svg width="0" height="0">
              <clipPath id="clipoffer">
                <polygon points="2028px 830px,0px 985px,0px 0px,2028px 0px">
                </polygon>
              </clipPath>
            </svg>

            <div class="bg">

            </div>

        </div> <!-- end of div id="offer" -->

根据我所遵循的说明，它应该是完美的，但事实并非如此。效果在http://samandera.com/处可见。它适用于Chrome，因此您也可以正确预览。

感谢您提供各种帮助。

Answer 1

点属性值必须仅为数字。拥有px是非法的。你引用的例子没有它们。

您是否在UA的错误日志中看到了此类错误？

/*Firefox*/
clip-path: polygon(2028 830,0 985,0 0,2028 0);
-moz-clip-path: url('#clipoffer');

没有-moz-clip-path这样的东西。对于你想要的非webkit

clip-path: url('http://samandera.com/#clipoffer');

Svg剪辑路径在Firefox，IE和Opera中不起作用

1 个答案: