Laravel 4 Framework中的CSS图像,图像和字体

Question

我在使用Laravel 4 Framework时遇到了一些问题.首先,为了进行设置,我在我的公共文件夹中有一个assets文件夹,其中包含一个名为"CSS"的css文件夹,一个名为"images"的图像文件夹,以及一个名为"webfonts"的字体文件夹.以下是路径:

/laravel-master/public/assets/CSS

/laravel-master/public/assets/images

/laravel-master/public/assets/webfonts  

CSS文件夹里面是我的主要CSS文件style.css.我试图使用图像作为我在CSS文件中调用的背景.这是代码:

.banner-image{
    background: transparent url('../assets/images/8662834823_575a23516d_o.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 800px;
    min-width: 1200px;
}

我也尝试过:

.banner-image {
background: url('assets/images/8662834823_575a23516d_o.jpg');
}

和:

.banner-image {
background: url('/assets/images/8662834823_575a23516d_o.jpg');
}

在我看来,我用div调用这个CSS:

<div class="banner-image"></div>

这两个都导致页面保持空白.图像没有显示,我不知道为什么.

到下一个.不使用CSS,我只是想显示一个简单的图像.我试过了:

<img src="{{asset('assets/images/fanssignupsplash.png')}}">

和:

{{HTML::image('images/fanssignupsplash.png')}}

和:

{{HTML::image('assets/images/fanssignupsplash.png')}}

所有这些都导致图像符号损坏.图像未显示.

最后,再次在CSS中,我试图使用我在上面提到的webfonts文件夹中放置的字体文件.但是,字体再次无效.我知道CSS文件正在正确上传到页面,因为文本上的颜色发生了变化,但是没有应用字体.这是CSS:

@font-face {

  font-family:'proxima-nova';
  src:url('/assets/webfonts/proximanova-bold-webfont.eot');
  src:url('/assets/webfonts/proximanova-bold-webfont.eot?#iefix') format("embedded-opentype"),url('/assets/webfonts/proximanova-bold-webfont.woff') format("woff"),url('/assets/webfonts/proximanova-bold-webfont.ttf') format("truetype"),url('/assets/webfonts/proximanova-bold-webfont.svg#ProximaNovaBold') format("svg");
  font-weight:bold;
  font-style:normal

  }

我使用的视图是一个刀片文件(landing.blade.php).这都在localhost上,使用MAMP.

非常感谢您对所有这些的帮助.我是Laravel的新手,我已经在现场网站的框架之外完成了所有这些工作.非常感激您的帮忙.

Answer 1

我停止了你的第一个问题,首先尝试了解决方案.

不应该是这样的:

.banner-image{
    background: transparent url('../images/8662834823_575a23516d_o.jpg') no-repeat center center;
    ...
}

看到删除的"/ assets"

因为如果我把它弄好了,你的树枝是这样的:

• 资产
  • CSS
    • style.css文件
  • 图片
    • 8662834823_575a23516d_o.jpg

对于第二个问题,请尝试/在网址的开头添加:

{{HTML::image('/assets/images/fanssignupsplash.png')}}

因为我认为资产是你服务器的根源.