将.css文件与Laravel一起使用



我在使用带有.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);

相关内容

  • 没有找到相关文章

最新更新