自定义形状的Photoshop切片到HTML

Question

我正在尝试创建一个html页面，显示心脏框架后面的个人资料图片，我有心脏框架的PSD。

配置文件图片将是矩形的，应该放在框架后面而不重叠它。如果我要创建切片，它将是矩形的，图片将无法正确放入框架中，修改配置文件因为将要显示在那里的实际图片将基于用户上传和普通的矩形图片而将图片裁剪成适合框架的图片将不是解决方案。

是否有一种方法可以使用切片工具创建心脏切片（帧之间的空白区域），这样我就可以使用该切片的背景作为轮廓图片？因为我所得到的只是目前的矩形切片。

感谢。

Answer 1

您可以通过使用Photoshop更改心脏框架图片来做到这一点，因此心脏内部应该是透明的，外部是白色的

您可以使用CSS为保存个人资料图片的元素设置拖曳背景，第一个背景是心脏图片，第二个是个人资料照片。

请参阅此链接，了解如何使用多个背景http://www.css3.info/preview/multiple-backgrounds/