我在使用带有.html文件和.css文件的laravel时遇到问题。也许你能帮我我在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文件
我的图像位于它们所属的公用文件夹中一个名为img的文件夹中。只有我的潜水器的定位工作。我需要一些帮助,因为我不知道如何使用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%;
这里有另一个答案:CSS文件中的相对路径是相对于CSS文件的吗?。
编辑
不要忘记,"/public"文件夹中的所有文件并不是由Laravel真正控制的。这是一个纯粹由Web服务器控制的文件夹,它将一些控制传递给PHP和Laravel。所以当你在浏览器上点击文件时:
http:://laravelapplication.com/img/bgcontent.gif
这不是由Laravel解决的,而是由您的Web服务器(apache?nginx?)解决的。这就是所有资产文件(css、js、png、jpg、gif)的情况。
有时这可能会令人困惑,因为Laravel生成URL,但当这些URL变成HTML时,如果它们指向/public
文件夹中的真实文件,Laravel就与它们无关。
你怎么知道它们指向公共:文件必须存在。如果它不存在,您的Web服务器将把它传递给public/index.php
,然后,是的,它将由Laravel处理。
你如何确保这是一个Laravel或HTML/CSS/Webserver的东西?获取文件的完整URL并将其放入浏览器地址:
http:://laravelapplication.com/img/bgcontent.gif
如果你的浏览器显示了这张图片,那就不是Laravel在工作,只是你的网络服务器在工作。
除非,当然,你有智能路由为你做这项工作,但这是一个更高级的Laravel路由问题,我认为这里不是这样。
尝试在img路径前面附加斜杠,如下所示:
background: url(/img/bgcontainer.jpg) repeat-y center top;
url()函数用于yor css文件,而不是HTML文件。因此,如果你的css在public/css/style.css
中,而你的图像在public/img/one.jpg
中,那么使用url(../img/one.jpg);