在 Laravel 中使用 .css 文件答案

【问题标题】：Using .css files with Laravel在 Laravel 中使用 .css 文件
【发布时间】：2014-03-16 20:35:56
【问题描述】：

我在将 laravel 与 .html 文件和 .css 文件一起使用时遇到问题。也许你可以帮助我我在 index.blade.php 中有这个 sn-p

    <div class="container">

<div class="top">

    <div class="navigation">
        <a href="index.html">home</a>
        <a href="index.html">the journey</a>
        <a href="index.html">characters</a>
        <a href="index.html">image gallery</a>
        <a href="index.html">history</a>

    </div>

    <div class="pattern"><span></span></div>

    <div class="login">

        <div class="loginitem">

            <form action='login.php' method='post'>
            Username: <input type='text' name='username' /><br />
            Password: <input type='password' name='password' /><br />
            <input type='submit' value='Login' /><br><br>
            </form>

        </div>

        <div class="loginbutton">
            <i> Not </i> <a style="color: red;"  href="registration.html">registered </a> <i> yet? </i> 
        </div>
    </div>

    <div class="pattern"><span></span></div>


</div>

还有我 index.css 文件中的这个 sn-p

    .divider {
background: url(img/divider.gif) no-repeat;
height: 20px;
margin: 24px 0;
    }


    /* structure */

    .container {
background: url(img/bgcontainer.jpg) repeat-y center top;
margin: 0 auto;
width: 736px;
    }


    .top {
background: url(img/bgcontent.gif) no-repeat 0 -4%;
margin: 0 auto;
text-align: center;
width: 632px;
    }

    .login .loginitem{
     position: relative;
     padding-top: 85px;
    }

我在使用这些行加载图像时遇到问题

     background: url(img/bgcontainer.jpg) repeat-y center top;
     background: url(img/divider.gif) no-repeat;

等等。来自 style.css 文件

我的图像位于它们所属的公共文件夹中名为 img 的文件夹中。只有我的 div 的定位工作。我需要一些帮助，因为我不知道如何使用 laravel 从 .css 文件中加载图片。提前致谢。

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html>

    <head>
{{ HTML::style('css/index.css'); }}
     <link href='http://fonts.googleapis.com/css?family=Alegreya+SC:400,400italic'            rel='stylesheet' type='text/css'>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta name="description" content="description"/>
      <meta name="keywords" content="keywords"/> 
    <meta name="author" content="author"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Caught in the Middle</title>
     </head>

这就是我加载 .css 文件的方式

【问题讨论】：

您使用的是哪种文件夹结构，img/image-name.jpg 将相对于.css 文件所在的位置
如何/在哪里加载 CSS 文件？
我们需要知道文件夹结构，你有css文件夹吗？
是的。文件夹结构是 Laravel/Public/css/style.css，我的图片在 Laravel/Public/img/bg.jpg 中（仅作为示例）。 .css 文件有效。背景 : url('') 行代码不起作用。
用 crome 检查器（或您喜欢的任何浏览器）检查它试图加载的 css 文件的路径。如果它不起作用，如果您检查 chrome 控制台，您应该会看到类似 GET http://domain.com/css/index.css 404 (Not Found) 的错误。这应该是改变正确路径的线索

标签： html css image laravel styles

【解决方案1】：

如果你的文件夹结构是

Laravel/Public/css/style.css

和你的图片在你的css文件夹的同一级：

Laravel/Public/img/bg.jpg

而css图片是相对于.css文件的，那么你可能应该下一层进入图片文件夹：

background: url('../img/bgcontent.gif') no-repeat 0 -4%;

这是另一个答案：Is a relative path in a CSS file relative to the CSS file?。

编辑

不要忘记你的 '/public' 文件夹中的所有文件都不是真正由 Laravel 控制的。这是一个纯粹由您的网络服务器控制的文件夹，它将一些控制权传递给 PHP 和 Laravel。因此，当您在浏览器上点击文件时：

http:://laravelapplication.com/img/bgcontent.gif

这不是由 Laravel 解决的，而是由您的网络服务器（apache？nginx？）解决的。这就是您拥有的所有资产文件（css、js、png、jpg、gif）文件的情况。

有时它可能会令人困惑，因为 Laravel 会生成 URL，但是当这些 URL 变成 HTML 时，如果它们指向您的 /public 文件夹中的真实文件，Laravel 与它们无关。

你怎么知道它们指向公共：文件必须存在。如果它不存在，您的网络服务器会将其传递给 public/index.php，然后，是的，它将由 Laravel 处理。

你如何确保这是一个 Laravel 或 HTML/CSS/Webserver 的东西？获取文件的完整 URL 并将其放在您的浏览器地址中：

http:://laravelapplication.com/img/bgcontent.gif

如果您的浏览器显示该图像，则不是 Laravel 工作，只是您的网络服务器。

除非，当然，你有智能路由为你工作，但这是一个更高级的 Laravel 路由问题，我认为这里不是这种情况。

【讨论】：

这应该工作。你确定你没有打错文件名吗？
记住我使用的是 laravel 框架。这是我正在使用 Laravel 重建的网站。以前我使用纯 php、html 和 css 构建网站。它工作得很好。这个问题是关于 Laravel 的视图和模板引擎的
是的，不是真的，这有时可能会令人困惑，所以我只是做了一个编辑来澄清。

【解决方案2】：

url() 函数用于您的 css 文件，而不是 HTML 文件。因此，如果您的 CSS 在 public/css/style.css 中并且您的图像在 public/img/one.jpg 中，则使用 url(../img/one.jpg);

【讨论】：

这就是我正在做的事情。 url() 函数写在我的 .css 文件中，而不是在 Blade.php 中

【解决方案3】：

尝试在 img 路径前添加斜杠，如下所示：

background: url(/img/bgcontainer.jpg) repeat-y center top;

【讨论】：