如何从文件夹中获取图像并使用background-image使其成为背景？

Question

所以我在这个练习网站上工作，并且我的文件夹设置为将我的图像全部放在自己的文件夹中。我的问题是，当我想使用css中的background-image拍摄该图像并将其用作背景时，如果没有使其具有自己的URL，就无法从中获取该图像。所以我想知道是否可以使用background-image

从文件夹中提取图像

我当前使用的CSS是否有帮助

/* Welcome Styling */

.web-welcome-background {
  width:50%;
  filter:brightness(40%);
  background-image: url('images/front-page-welcome.jpg');
}

当前这无法正常工作，我不知道如何解决。

Answer 1

/* Welcome Styling */
.web-welcome-background {
    width:50%;
    filter:brightness(40%);
    background:url("images/front-page-welcome.jpg");
}

  

确保images文件夹存在并且可以访问

Answer 2

您需要的是静态文件服务器。也就是说，有一款软件可以使您的本地文件系统通过HTTP可用。

一种启动并运行文件服务器的简单方法是安装Node.js，然后在您的终端中运行以下命令。

npx serve

这将使用Zeit的项目serve。但是，Node.js生态系统内部和外部还有许多其他选择。

一旦文件服务器运行并重新加载页面，假定文件路径正确，背景图片就会出现。