如何在我的網站上將.webm文件設置為背景？

Question

我正在尋找一種方法來設置.webm文件作為我的網站上的背景，但當我把它放在我的CSS上時，文件沒有顯示。

我試圖在我的網站上設置一個動畫壁紙，我一直在.gif或.mp4上導出文件，但文件太大了網站（20mb）所以我決定將文件導出到.webm（名為“itry” .webm“）

所以，在我的CSS文件中我得到了這個：

position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
    background-image: url("img/itry.webm");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */

它不顯示文件而是顯示白色背景。

Answer 1

聽起來你有一個相對的問題。

嘗試：

background-image: url("./img/itry.webm");

不過我推薦使用HTML5視頻標簽。

<video loop autoplay>
    <source src="video/itry.webm" type="video/webm">
</video>

Answer 2

通過將文件格式更改為.mp4來解決，我認為.webm文件仍然存在與瀏覽器的兼容性問題，如此處所示瀏覽器兼容性測試