如何在我的Laravel网站中添加视频背景作为横幅?

时间:2019-07-08 05:04:29

标签: html css laravel sass

我要做的就是将视频背景作为横幅,并在视频上方放置我的徽标和导航栏(但透明)。

我尝试了很多代码,但是在某些时候,我被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>

请,我真的可以在这里使用一些帮助。

谢谢!

1 个答案:

答案 0 :(得分:0)

我从您的问题中了解到的是,您没有在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混合的更多信息。