Question

我一直在梳理网络，看起来应该是一个非常简单的过程。我希望简单地从我的服务器分配一个图像作为我正在通过CSS工作的页面的背景。我对Laravel框架有些新意，所以这可能有点不同了吗？

我目前有以下CSS定义我的页面正文（包括背景图片）：

body {
  overflow:auto;
  width: 100%;
  height: 100%;
  background: transparent url('.../img/giant_back_hi.jpg') no-repeat center center;
  background-repeat: no-repeat;
  background-position: fixed;
  -webkit-background-size: cover;
  -webkit-filter: cover;
  background-size: cover;
  color: white;
  margin: 0;
  padding: 0;  
}

以下视图元素来阅读它：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="resources/css/layout.css" />
    <title>my-app</title>
  </head>
  <body>
    @include("header")
    <div class="content">
      <div class="container">
        @yield("content")
      </div>
    </div>
    @include("footer")
  </div>
</html>

每当我尝试渲染页面时，一切都很好但背景返回空白。知道我错过了什么或如何正确编码吗？

我的目录图如下：

public
--css
----layout.css
--img
----giant_back_hi.jpg

提前感谢您的帮助！

修改我确定当我将定量高度值应用于css中的高度属性时，即。（height:1200px;）显示图像。

所以，图像显示它只是没有覆盖页面，因为我也告诉它...它被我的标题隐藏，直到我手动调整它。

Answer 1

您使用安装中的public/文件夹作为您的网站，因此您的public/css/和public/img/文件夹的内容可供您的HTML和CSS访问视图，来自/css/和/img/。

在这种情况下，HTML视角下的根目录（/）是您的public/目录，因此，在您的HTML中，更新指向您的css的链接：

<link rel="stylesheet" href="/css/layout.css" />

并在你的CSS中：

background: transparent url('/img/giant_back_hi.jpg') no-repeat center center;

没有覆盖背景Laravel的背景图象

1 个答案: