Question

我做了一个简单的菜单，每个项目都是300x100像素。背景中的图像位于-150像素，当您将鼠标悬停在项目上时，它会变为0（因此整个项目都有背景）。它在Chrome上工作正常，背景在IE上鼠标悬停的中途，背景在FF上不断定位0。我该如何解决？小号

HTML：

<ul class="wrapper">
    <li id="webd"       class="box"><span class="title">web design</span></li>
    <li id="model"      class="box"><span class="title">3D modeling</span></li>
    <li id="digidraw"   class="box"><span class="title">digital drawing</span></li>
    <li id="other"      class="box"><span class="title">other</span></li>
</ul>

这是CSS示例：

.box {
    display: block;
    position: relative;
    width: 300px;
    height: 110px;
    background-color:black;
    z-index: 15;
    margin: 2px 2px 2px 2px;
    font-family: 'web_serveroffregular';
    color:white;
    font-size:x-large;
    transition: all .5s ease-in-out;
    background-position-x:-150px;
    background-repeat:no-repeat;
    text-align:right;
}

#webd {
    background-image:url(images/webd.png);
}

#webd:hover {
    background-position-x:0px;
}

您可以在http://klaunfizia.pl/damian/查看整个网站，在http://klaunfizia.pl/damian/style.css和http://klaunfizia.pl/damian/galeria.css查看CSS 如果你愿意的话。

@edit

改变了：

background-position-x:-150px;

为：

background-position: -150px 0px;

这在FireFox上工作正常，但在IE浏览器上只有一半，background:fixed和backgroud-position:fixed会为每个浏览器破坏它。

Answer 1

background-position-x是invalid CSS。请改用background-position: -150px 0px。此外，必须将background-attachment属性设置为“fixed”才能在Firefox和Opera中使用according to this page at W3Schools）

不同浏览器上动画background-position-x的问题

1 个答案: