很多網(wǎng)站都會在頁面上添加背景音樂，以營造浪漫、神秘或者歡快的氛圍，但是你是否想過，CSS 能否也實(shí)現(xiàn)添加背景音樂的效果呢？

body {
background-image: url("background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
audio {
position: fixed;
top: -100px;
left: -100px;
opacity: 0;
}

答案是肯定的，我們能夠利用 CSS 中的position屬性來設(shè)置音樂播放器的位置，具體的代碼實(shí)現(xiàn)如上所示。這里需要注意的是，為了讓背景音樂不影響頁面其他元素的排版，我們需要將它的opacity值設(shè)置為 0，在保證不影響播放的情況下讓它從屏幕上“消失”。

此外，在上述代碼中我們還使用了background-attachment屬性，它的作用是固定頁面的背景圖，以防止在滾動頁面的時(shí)候音樂播放器的位置出現(xiàn)偏差。

然而，需要注意的是，這種方式仍然存在一些缺陷，比如音樂播放器的 UI 無法自定義，而且無法實(shí)現(xiàn)自動播放、暫停等功能。因此，在實(shí)現(xiàn)背景音樂的效果時(shí)，我們應(yīng)該仔細(xì)考慮是否真的需要使用 CSS。