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文件仍然与浏览器存在兼容性问题，如您在此处Browser Compatibility Test

如何在网站上将.webm文件设置为背景？

2 个答案: