CSS Frame Image 覆盖另一个图像以创建类似绘画的效果答案

【问题标题】：CSS Frame Image over another image to create a painting like effectCSS Frame Image 覆盖另一个图像以创建类似绘画的效果
【发布时间】：2012-05-23 14:59:42
【问题描述】：

我从网站设计师那里得到以下结果：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 等......并且客户希望每个浏览器中的图片标题。

对这个大脑破坏者有什么帮助吗？

问候，亚历克斯

【问题讨论】：

您可以访问服务器端技术吗？由于您无论如何都是从数据库中提取图片，因此这可能更适合在服务器上完成。
是的，我是开发人员，哈哈，但我也在为这个网站制作 CSS，我并不擅长它。该平台位于带有 ASP.Net 3.5 框架的 IIS 上

标签： css background image

【解决方案1】：

您可以在图像上使用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)]

【讨论】：

谢谢，我怎样才能得到这些数字？我的意思是，你如何计算它们？算法是什么？
是的，明白了。它的 tetha 的 sin() 和 cos()，单位是弧度而不是度数。所以首先改变 get radians = PI * degress / 360. 然后使用 cos() 和 sin() 。我现在就试试
arg 我是数学专业的我应该知道 XP 对不起，我的线性代数有点生疏了。

【解决方案2】：

兼容性的最佳解决方案是使用System.Drawing 在服务器端转换图像。至于框架叠加，我认为您过于复杂了：如果您知道背景总是会是什么样子，请不要将框架剪切为透明图像，将其与背景一起剪切以便隐藏图片中的任何溢出。

【讨论】：

感谢 Tom，我将尝试使用 System.Drawing 看看它是否有效。但是背景很复杂：mp-books.ru/html/img/bgpagina2.jpg 如果我要让页面流畅，我不确定页面是否流畅，它会起作用。不过会测试它。
啊，背景的好点。如果需要，您可以在旋转图像时裁剪图像。
System.Drawing 绝对是解决这个问题的方法。它将保证相同的图像出现在每个浏览器中。

【解决方案3】：

CSS 转换属性允许开发人员通过 CSS 旋转、缩放和倾斜 HTML 块。尽管您可以在 Photoshop 或 The GIMP 中对图像做同样的事情，但使用 CSS 转换可以让开发人员对任何 HTML 标记做同样的事情，并允许用户在转换后的对象中选择文本。 checkout this solution

【讨论】：

感谢您的回复。我将对此进行进一步阅读，也许这就是答案。如果我能让它工作，我会标记它并给你买啤酒。欢呼