我正在使用由 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>
我想知道这个问题是否有解决方法。任何帮助将不胜感激。
最佳答案
使用 RGB 形式的颜色，例如:color:rgba(255, 106, 0, 0.24) 此属性中的最后一个参数 0.24 是不透明度。使它为 0，它将是透明的。
关于javascript - 影响相邻元素背景颜色的不透明度过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16843749/