背面可见性使文本模糊在子元素中

时间:2014-05-20 23:37:57

标签: html css css3

我正在尝试为我的布局制作可堆叠的六边形,使用css3的精彩转换功能制作!唯一的问题是当我和a:悬停效果改变它的不透明度时,在转换过程中它会改变反别名属性,平滑所有线条,并使文本模糊。它也会暂时排除它周围的一切,尽管它会在一秒左右后恢复。虽然这不一定与网站的功能相冲突,但它看起来很草率。

我尝试通过将代码更改为此来解决此问题:

http://jsfiddle.net/QPbJL/

虽然这可以解决所有问题的困难,但现在我的文字在过渡期间变得模糊不清。我试过添加-webkit-backspace-visibility:none;到.HexDesc,因为那是文本的直接容器。

.HexIn2 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-backface-visibility:hidden;

-webkit-background-size: 125%;
-moz-background-size: 125%;
background-size: 125%;
visibility: visible;

-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
transition: all 0.5s ease;
}

    .HexDesc {
    padding: 3px; 0px 3px 0px;
    -webkit-backface-visibility:none !important;
    background: #ffffff;
    color:#000;
    margin-top:106px;
    height: 81px;
    font-family: 'PT Sans Narrow', sans-serif;
    line-height:85%;
    letter-spacing:1px;
    font-size: 13px;
    }

然而,这没有效果。我也试过在那里投掷“!important”,试图让它超越那个div中的其他所有东西,再次zilch!就像HexDesc容器中的任何东西一样,背面可视性绝对没有效果!这非常令人沮丧:C我想知道是否有人知道为什么会发生这种情况,以及我能绕过它的任何方式吗?

1 个答案:

答案 0 :(得分:2)

通常是"中"值。对于旋转,您只能在0,90,180,270,360处获得模糊...这是浏览器本身的错误。 您可能会注意到这适用于css中的许多内容(例如,不在1或0时,不透明度通常会产生涓滴效应)。

在您的情况下,在您的jsfiddle中,如果您将所有120deg替换为180deg而将所有60deg替换为90deg,则它将完美地运作。 (意思是没有模糊,但你不再得到六边形)。对于三角形,我建议使用此边框黑客(http://apps.eky.hk/css-triangle-generator/)。你可以得到相同的结果。

对于"暂时取消",它也是来自Chrome的已知错误(可能还有其他浏览器,我不知道)。即使你去gmail或youtube,你仍然会看到这种情况发生。