javascript - 使用 javascript/css 切片图像

Question

我想用 javascript/css 沿对 Angular 线切割图像，但我不知道我是否可以使用非 HTML5 代码实现，如果是跨浏览器，是否必须是 HTML5。

这是我的设计

http://www.behance.net/gallery/Redesign-GlobalPerformancecat/680358

谢谢你的帮助

X

好的，我会解释得更好，

下个网址不作广告用途

http://www.globalperformance.cat/

我正在尝试从 flash 移植到 html“Nosotros > Nuestro equipo”部分，我知道这很困难，如果需要我可以让它更简单，但我真的想尽可能离开 flash

Answer 1

你的问题的答案有点棘手，但我会尽力解释。

为了跨浏览器兼容性，您需要创建一个 50% 透明且 50% 填充用作背景的对 Angular 线渐变的图像。按照我刚刚为您创建的屏幕截图操作，这张图片不言自明:http://screencast.com/t/LU5E1XPdhoJ

您还需要更新您的 html 代码，例如

<ul>
  <li> make this li tag position relative
    <div>
     place that half transparent image in this div and make this div position absolute and z-index 10 or higher
    </div>
     <img src="image.jpg" /> put actual image in this img tag
  </li>
</ul>