css怎么添加背景音乐csdn

添加背景音乐可以使用HTML5的`<audio>`标签，同时利用CSS设置音频控件的样式。下面是一个简单的示例代码：

<audio autoplay loop>
  <source src="music.mp3" type="audio/mp3">
</audio>

上面的代码将自动播放并循环播放名为“music.mp3”的音频文件。你可以根据实际情况调整`<source>`标签中的`src`属性值和`type`属性值来适配不同的音频文件。

接下来，使用CSS来设置音频控件的样式：

audio {
  display: none; /* 隐藏音频控件 */
}

body::before {
  content: "";
  display: block;
  height: 100vh;
  background-image: url(background.jpg); /* 设置背景图片 */
  background-size: cover;
  background-position: center;
  filter: brightness(0.6); /* 添加透明度 */
}

/* 添加一个按钮来控制音频的播放和暂停 */
button {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

button:hover {
  opacity: 0.8;
}

button:focus {
  outline: none;
}

button.play::before {
  content: "\25B6"; /* 添加播放图标 */
}

button.pause::before {
  content: "\23F8"; /* 添加暂停图标 */
}

上面的CSS代码中，使用了伪元素`::before`来添加了一个占位元素，并设置了背景图片和透明度。同时，添加了一个按钮来控制音频的播放和暂停，并添加了一些基本的样式。

最后，使用JavaScript代码来控制音频的播放和暂停：

const audio = document.querySelector("audio");
const button = document.querySelector("button");

button.addEventListener("click", () => {
  if (audio.paused) {
    audio.play();
    button.classList.remove("play");
    button.classList.add("pause");
  } else {
    audio.pause();
    button.classList.remove("pause");
    button.classList.add("play");
  }
});

audio.addEventListener("ended", () => {
  button.classList.remove("pause");
  button.classList.add("play");
});

上面的JavaScript代码中，使用了`querySelector`方法来获取音频控件和按钮。然后，添加了一个点击事件来控制音频的播放和暂停，并根据当前的状态来更改按钮的样式。同时，添加了一个`ended`事件来在音频播放结束后重置按钮的状态。

通过上面的示例代码，你可以实现一个简单的带有背景音乐的页面效果。需要注意的是，在实际应用中，你需要根据具体的需求来修改样式和代码。