自定义形状的 Photoshop 切片 HTML

Custom Shaped Photoshop Slices to HTML

我正在尝试创建一个 html 页面,该页面在心形框架后面显示个人资料图片,我已经获得了带有心形框架的 PSD。

个人资料图片将是矩形的,应该放在框架后面而不重叠,如果我要创建切片,它将是矩形的,图片不会正确地适合框架,正在修改个人资料图片(例如裁剪以适合框架)将不是解决方案,因为将在那里显示的实际图片将基于用户上传的内容和普通的矩形图片。

有没有一种方法可以使用切片工具来创建心脏切片(框架之间的白色 space),这样我就可以将该切片的背景用作个人资料图片?因为我现在得到的只是矩形切片。

谢谢。

你可以用Photoshop改变心形框的图片,所以心形里面应该是透明的,外面是白色的

然后你可以使用CSS为持有个人资料图片的元素设置两个背景,第一个背景是心形图片,第二个是个人资料照片。

查看此 link 了解如何使用多个背景 http://www.css3.info/preview/multiple-backgrounds/