html - 我如何在 Laravel 中将视频背景作为横幅添加到我的网站？

Question

我想要做的就是将视频背景作为横幅，并在视频上方显示我的 Logo 和导航栏(但透明)。

我已经尝试了很多代码，但在某些时候，我在 scss 文件中被阻止了。我的视频显示宽度太大，因此，我在页面底部看到滚动条。我需要宽度为 1200 像素，但最终它不起作用。

我正在使用 scss，而且我是初学者。如果您有一些解决方案，请告诉我。 Laravel元素中是否也需要编译sass/scss？因为我已经在 Laravel 元素中安装了 sass 的节点文件，所有的东西都需要有 sass 才能工作。

我的 HTML 代码:

<div class="banner"> <video autoplay muted loop> <source src="img/banner.mp4" type="video/mp4"> </video> </div>

拜托，我真的需要一些帮助。

谢谢!

Answer 1

我从你的问题中了解到你没有在 laravel 中获取 .scss 文件。问题是 SASS 不能直接被浏览器理解。您需要编译它以便浏览器可以显示它。您需要使 .css 文件正常工作。

您的短期解决方案是使用 sass 到 css 转换器。您可以在线找到许多服务。然后就可以直接使用css文件了。

但是，如果您经常使用 SASS 或任何其他类似的预处理器样式语言，那么您应该设置您的 laravel 开发环境。为此，您可以按照以下步骤操作。

首先，将所有 Sass 文件放入您的文件夹中。最好是 /resources/assets/sass。然后使用 gulp 编译它。另外，你可以使用 laravel mix。 之后尝试运行 npm run watch。如果您还没有安装 npm，那么您将需要安装它。

它应该编译 SASS。您应该在 /public 文件夹中获得一个 css 文件。很可能是 /public/css 文件夹。

请查看 laravel mix有关 laravel mix 的更多信息。