JQuery函数扭曲图像。怎么修？

2012-12-15 42 views 1 likes

亲眼见证。我无法弄清楚是否有可能摆脱奇怪的彩色边框。此代码的要点是能够旋转图像并同时更改其颜色。代码的方式，图像的颜色和角度可以很容易地编码为动态的。这段代码使用了一个白色的png图像，但是它的爪子形状有一个透明层。这样当你编辑背景颜色时，它会改变图像的颜色。如果它不是用于添加到图像中的奇怪边框，它会很好用...注意，如果您删除了旋转功能，则不会出现恼人的边框。JQuery函数扭曲图像。怎么修？

包括JQuery的1.8.2，这里是HTML/CSS代码：

CSS：

.image { 
display: inline-block; 
margin-left:auto; 
margin-right:auto; 
background-color: blue; 


transform: rotate(30deg); 


}

HTML：

<span class="icon"></span>

来源

2012-12-15 user1905478

回答

添加此：-webkit-backface-visibility:hidden;解决了这个问题对我来说

来源

2012-12-15 01:05:07 daniel

但是，这只适用于-webkit库，是不是也有解决方案也为其他浏览器？ – Dim13i

下面是其他浏览器的代码。据说这应该可行，但我仍然得到Firefox的“边界”，即使在Chrome上它似乎已经修复了。 -webkit-backface-visibility：hidden; -moz-backface-visibility：hidden; -ms-backface-visibility：hidden; – user1905478

也许尝试像'outline：1px solid transparent;' - 我不确定这是否有可能使完全跨浏览器兼容 – daniel

爪子是通过在png中使其区域透明并设置背景而创建的红色和周边地区白色。

我的建议是，相反。在你的png中用红色填充爪子，并使其周围的空间保持透明。至少在你的小提琴中，由于背景颜色将设置为白色，因此不会再有红线。

来源

2012-12-15 01:36:49 Bruno

JQuery函数扭曲图像。怎么修？

回答

相关问题