在現代網頁設計中,背景音樂是一種很常見的設計元素。通過CSS樣式表,我們可以輕松地將音樂添加到網頁中。在HTML中使用DIV標簽來包含音樂,并使用CSS樣式表定義其背景圖像和其他屬性,如音量、循環等。下面是一個用CSS樣式表添加背景音樂的例子。
div { background-image: url("music.png"); /* 定義背景圖像 */ background-repeat: no-repeat; /* 防止背景圖像重復 */ background-position: center center; /* 圖像居中 */ height: 200px; /* 定義DIV的高度 */ width: 200px; /* 定義DIV的寬度 */ padding: 50px; /* DIV內部的填充 */ margin: auto; /* 居中DIV */ overflow: hidden; /* 防止音樂露出DIV */ } audio { width: 100%; /* 寬度與DIV相同 */ height: 100%; /* 高度與DIV相同 */ position: absolute; /* 讓音樂覆蓋DIV */ bottom: 0; /* 居DIV底部 */ opacity: 0.5; /* 音樂透明度,可根據需要更改 */ } audio:focus { outline: none; /* 去掉音樂容器的焦點樣式 */ }
上述代碼中,我們定義了一個DIV標簽,并為其指定背景圖像、高度、寬度等屬性。接著,我們使用audio標簽來包含音樂,并將其設置為絕對定位,并覆蓋在DIV之上。我們還定義了一個:focus樣式來去掉音樂容器的焦點樣式。
最后,在頁面中添加以下HTML代碼即可:
在以上代碼中,我們將音樂文件(music.mp3)鏈接到audio標簽,并為其指定了autoplay和loop屬性,以便在頁面加載時自動播放并循環播放。通過上述CSS樣式表,我們可以將音樂作為背景添加到DIV中,從而實現一個簡單而又有效的背景音樂效果。
上一篇css畫一個風扇葉子
下一篇css畫七色花