CSS Frame Image在另一个图像上创建一个类似效果的绘画

时间:2011-03-29 18:01:38

标签: css background image

我从网站设计师那里获得了以下结果:http://mp-books.ru/html/img/result_03.jpg

这意味着类似邮票的框架将保留在页面上,但是人物图片将根据具体情况而变化,将从数据库中获取。

我已经得出了这个结果:http://jsfiddle.net/alexpeta/MUpk8/1/但这是我能做的最好的事情。

我已尝试使用旋转式

-webkit-transform: rotate(-18deg); 
    -moz-transform: rotate(-18deg); 
    transform:rotate(-18deg); 
    -o-transform:rotate(-18deg);

但IE不会允许这种转换,因为它具有精确度数的过滤器:例如:45,90,180等......并且客户想要在每个浏览器中标题化的图片。

对这个大脑破坏者的任何帮助?

此致 亚历

3 个答案:

答案 0 :(得分:2)

您可以在图片上使用MATRIX转换

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=0.951, M12=0.309,
    M21= -0.309, M22=0.951);

对应18度

计算:

[cos(18)  sin(18)]
[-sin(18) cos(18)]

答案 1 :(得分:2)

兼容性的最佳解决方案是使用System.Drawing转换服务器端的图像。至于帧叠加,我觉得你过于复杂了:如果你知道背景总是那样,不要把画面切成透明图像,用它背景切出来让它隐藏起来任何从图片溢出。

答案 2 :(得分:1)

CSS转换属性允许开发人员通过CSS旋转,缩放和倾斜HTML块。尽管您可以在Photoshop或GIMP中对图像执行相同操作,但使用CSS变换允许开发人员对任何HTML标记执行相同操作,并允许用户在变换对象中选择文本。 checkout this solution