相关疑难解决方法(0)

我一直在使用CSS3转换在我的网站中旋转带边框的图像和文本框.

问题是Chrome中的边框看起来很混乱,就像没有抗锯齿的(低分辨率)游戏一样.在IE,Opera和FF中它看起来好多了,因为使用了AA(它仍然清晰可见,但并不坏).我无法测试Safari,因为我没有Mac.

旋转的照片和文字本身看起来很好,只是看起来像锯齿状的边框.

我使用的CSS是这样的:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

有什么方法可以解决这个问题,例如强迫Chrome使用AA吗？

示例如下:

类似于" css变换,铬合金锯齿状边缘 ",Firefox上的3D变换也是如此,例如:http://jsfiddle.net/78d8K/5/(< - 记住:Firefox)

这一次,backface-visibility没有帮助:(

任何的想法？

我正在使用-webkit-transform: rotate()Chrome 14.0.835.2 dev-m 旋转一个元素,它正在为元素内部的文本做一些非常奇怪的事情.这让我想起了当您使用"平滑"抗锯齿而不是"清晰"旋转文本时,您在Photoshop中获得的类似效果.

谁知道这里发生了什么？它是针对此webkit或Chrome版本的,还是我可以做些什么来修复它？(它也不是列表元素之间边界的抗锯齿)

这是CSS:

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}

我有一个带有背景图像的div,我正在旋转.下面是我的css规则来旋转​​它:

#services_parallax { 
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
}

问题是在IE中,图像的边缘非常块状和锯齿状,而不是光滑的线条,并且似乎没有抗锯齿.有谁知道解决这个问题？它是在chrome中完成的,直到我通过应用-webkit-backface-visibility:hidden;来应用修复程序.哪个适用于chrome,我只需要一个IE的类似修复,如果存在的话.

要复制此问题,请将以下内容粘贴到HTML文件中并在IE中查看:

<style type="text/css"> 
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */ 
    transform: rotate(3.1deg); /* firefox & IE9+ */ 
    /* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
    background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center; 
    background-size:100% auto; 
    height:100px; 
    width:700px; 
    margin-top:50px; 
    margin-left:50px; 
} 
</style> 
<div id="services_parallax"></div>

我在CSS中完成了这个.

添加后,它在Google Chrome中运行良好:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

但在FireFox中,它看起来像这样:

在这里查看来源

我尝试了几件事并搜索了很多.我不知道如何摆脱FireFox创造的边界.我找到的大多数东西都是关于过渡的,我没有使用过.任何想法都会非常受欢迎.

参考文献:
- CSS3变换旋转导致Chrome中的1px移位
- -webkit变换旋转 - Chrome中的像素化图像
- CSS过渡效果使图像模糊/移动图像1px,在Chrome中？