Question

我正在使用由JavaScript滚动事件触发的CSS转换来显示元素，但是这种转换会影响Mac上Safari（5.1.7）和Chrome（27.0.1453.93）中相邻元素的背景颜色（ 10.6.8）根本没有意义。我想我偶然发现了一个错误。

我在Safari中仅使用以下的精简代码复制了该问题，并创建了一个jsfiddle（http://jsfiddle.net/5AEMF/），但该问题并未在该框架内发生：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Opacity transition affecting color of adjacent element</title>
<style>
* {
    margin: 0;
    padding: 0;
}

#bar {
    height: 100px;
    background-color: #FF0000;
}

#content {
    opacity: 0;
    height: 9999px;
    background-color: #0000FF;
    -webkit-transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#content.scrolled {
    opacity: 1;
}
</style>

<script type="text/javascript">
var scrolled = false;

var init = function() {
    onScroll(null);
    window.addEventListener('scroll', onScroll);
};

var onScroll = function(e) {
    if (window.scrollY > 0 && !scrolled) {
        scrolled = true;
        document.getElementById('content').className = 'scrolled';
    } else if (window.scrollY === 0 && scrolled) {
        scrolled = false;
        document.getElementById('content').removeAttribute('class');
    }
};

window.addEventListener('load', init);
</script>
</head>
<body>
<div id="bar"></div>
<div id="content"></div>
</body>
</html>

我想知道这个问题是否有解决方法。任何帮助将不胜感激。

Answer 1

使用RGB格式的颜色，例如：color:rgba(255, 106, 0, 0.24)此属性中的最后一个参数0.24是不透明度。使它为0，它将是透明的。

不透明度过渡影响相邻元素的背景颜色

1 个答案: