css三角面具

时间:2011-02-20 23:10:31

标签: css image mask

我想为tumblr创建一个主题,其中两个图像重叠显示为一个图像。这两个图像将一个放在另一个上面,顶部图像被遮盖成三角形。

这是我希望实现的照片模型:http://s3.amazonaws.com/data.tumblr.com/tumblr_l6w6w3sdM51qa49m9o1_1280.png?AWSAccessKeyId=0RYTHV9YYQ4W5Q3HQMG2&Expires=1298329479&Signature=cUcRVwOWEp6m%2BDDnJgTs81rhPxA%3D

我唯一不确定的是掩盖三角形图像。不确定是否可能......有什么想法吗?

1 个答案:

答案 0 :(得分:2)

对于跨浏览器兼容性,您需要将蒙版创建为您喜欢的形状的透明图像。请参阅下面的链接。我在photoshop中创建了一个三角形蒙版并将其应用于图像。

检查http://jsfiddle.net/39VG9/1/

处的工作示例