css - 歌剧:位置:固定和背景图像

Question

在我的页面上，我有一个具有以下 CSS 规则的元素:

.pointer {
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    top: 70%;
    z-index: 1;
    width: 3%;
    height: 6%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    left: 0;
    background-image: url("img/myImage.jpg");
}

在我测试过的浏览器中运行良好，只有 Opera 不喜欢它。当我滚动时，背景图像也会“滚动”，因此会随着离开容器而消失。
我相信这是一个已知问题，但我仍然无法找到解决方案。

关于 this page描述了一种方法如何从 Opera 中隐藏 CSS 规则，但除了这篇文章是 anno 2002 的事实之外，我实际上不想使用 CSS hack。

删除 overflow: hidden 没有解决它，添加 background-attachment: fixed 也没有帮助。还有其他想法或解决方案吗？

编辑:
http://jsfiddle.net/mvV7G/

Answer 1

我看过你的 fiddle 元素。我认为问题是由于将背景图像和边框半径应用于同一元素引起的，老实说，我无法解释为什么这只发生在歌剧中。

但一个简单的解决方案是将 anchor 包裹在一个 div 中，并在每个元素之间拆分样式，确保背景图像和半径位于不同的元素上。

我已经创建了一个带有可能解决方案的 fiddle ，它需要一些整理，但我认为它会让你走上正轨 - http://jsfiddle.net/zyj6Z

CSS 如下:

.link {
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d000000, endColorstr=#4d000000)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d000000, endColorstr=#4d000000);
zoom: 1;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBvbHlnb24gZmlsbD0iI2ZmZiIgcG9pbnRzPSIyLjc2OSw3Ljk5MiAxMC43NjIsMCAxMy4xMzIsMi4zNjIgNy42MDQsNy44OTkgMTMuMjMxLDEzLjUyOCAxMC43NjIsMTYgMi43NjksOC4wMDcgMi43NzYsOCIvPjwvc3ZnPg==");
background-position: center;
background-repeat: no-repeat;
width: 10%;
height: 10%;
position: fixed;
top: 70%;
left: 0;
}
.test {
width: 10%;
height: 10%;
position: fixed;
top: 70%;
left: 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
overflow: hidden;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
background-color: #000000;
background-color: transparent\9;
background-color: rgba(0, 0, 0, 0.3);
text-indent: 100%;
white-space: nowrap;
}

和 HTML 在这里:

<div class="outer">
<div class="wrap">
     <h1>Stuff</h1>

    <div class="test"> 
        <a href="#" class="link">Hide me!</a>
    </div>
    <ul>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
        <li>
            <img src="//placehold.it/150x150" />
        </li>
    </ul>
</div>

希望对您有所帮助。