html - 在 Laravel 中使用 .css 文件

标签 html css image laravel styles

我在将 laravel 与 .html 文件和 .css 文件一起使用时遇到问题。也许你能帮我 我在 index.blade.php 中有这个片段

    <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 文件中的这个片段

    .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 文件

我的图像位于它们所属的公共(public)文件夹中名为 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 文件的方式

最佳答案

如果你的文件夹结构是

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?)解决的。这就是您拥有的所有 Assets 文件(css、js、png、jpg、gif)所发生的情况。

有时这可能会造成混淆,因为 Laravel 会生成 URL,但是当这些 URL 变成 HTML 时,如果它们指向您的 /public 文件夹中的真实文件,Laravel 将与它们无关。

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

你如何确定这是 Laravel 或 HTML/CSS/Webserver 的东西?获取文件的完整 URL 并将其放入您的浏览器地址:

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

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

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

关于html - 在 Laravel 中使用 .css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21830931/

相关文章:

css - <div> 的内容是否与另一个 <div> 重叠?

iphone - iPad Overlay 没有完全覆盖屏幕

jquery - 如何在单击 div 时通过 jQuery 显示和隐藏以及在单击 body 时隐藏

c# - 在 Unity 中使用 GetKeyDown 一次显示一个数组中的元素

javascript - 通过 javascript 将点击值传递给模态

javascript - 由于超时而取消预渲染请求

javascript - 单击 'x' 按钮并使用 angularjs 单击屏幕时如何关闭面板?( Angular 新手)

Java 图标图像最大文件大小

android - 如何检查文件是否已被媒体广播接收器扫描

javascript - 有什么方法类似于 <img> 来显示 .txt 文件的内容