要实现当鼠标滑动时，页面的header背景从透明色变为黑色，你可以使用JavaScript来监听滚动事件，并根据页面的滚动位置来改变header的背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Header Background Change</title>
<style>header {width: 100%;height: 60px;background-color: transparent; /* 初始为透明背景 */transition: background-color 0.3s; /* 平滑过渡效果 */position: fixed; /* 固定在顶部 */top: 0;left: 0;z-index: 1000;}
</style>
</head>
<body><header><!-- Header内容 -->
</header><script>// 获取header元素const header = document.querySelector('header');// 监听页面滚动事件window.addEventListener('scroll', () => {// 获取页面滚动的垂直位置const scrollHeight = window.pageYOffset;// 如果页面滚动超过0，将header背景变为黑色if (scrollHeight > 0) {header.style.backgroundColor = 'black';} else {// 如果页面滚动回到顶部，将header背景变回透明header.style.backgroundColor = 'transparent';}});
</script></body>
</html>
- CSS样式定义了header的初始背景颜色为透明，并设置了背景颜色变化的过渡效果。
- JavaScript监听了window对象的scroll事件，每次页面滚动时都会触发一个函数。
- 在这个函数中，我们检查页面的垂直滚动位置（window.pageYOffset）。如果页面向下滚动超过0像素，我们将header的背景颜色设置为黑色。如果页面滚动回到顶部（即scrollHeight为0），我们将header的背景颜色设置回透明。