2017-08-16 77 views
0

我想在顶部显示以下内容以显示“breadcrumb”的位置。我在图片中突出显示了它。Rails中的属性值CSS无效

What I want to achieve see the highlighted section

它的CSS是:

.breadcrumbs-v3.img-v3 { 
    background: url(../img/breadcrumbs/img3.jpg) no-repeat; 
    background-size: cover; 
    background-position: center center; 
} 

当我的CSS转换成轨道可接受的格式,它看起来像这样:

.breadcrumbs-v3.img-v3 { 
    background: url(<%= asset_url 'creative/martin_images/img3.jpg' %>) no-repeat; 
    background-size: cover; 
    background-position: center center; 
} 

不是看到我想要的图像看到我只看到这与以下错误消息:

无效的属性值

请参阅控制台以获取最右侧的错误消息。

Error

在我的样式表文件夹中我加载的CSS到我的布局,其中包括在代码所在的about.index.html。

/* 
*= require jquery-ui 
*= require creative/bootstrap.min 
*= require font-awesome 
*= require creative/animate 
*= require creative/animated-headline 
*= require creative/custom 
*= require creative/dark 
*= require creative/default 
*= require creative/footer-v1 
*= require creative/header-v6 
*= require creative/jquery.fancybox 
*= require creative/line-icons 
*= require creative/owl.carousel 
*= require creative/parallax-slider 
*= require creative/settings 
*= require creative/style 
*= require creative/app 
*= require creative/blocks 
*= require creative/page_log_reg_v1 
*= require creative/page_about 
*= require creative/jquery.mCustomScrollbar 
*= require creative/sky-forms 
*= require creative/custom-sky-forms 

*= require_self 
*/ 

这是我的布局视图creatives.html.erb。

<!DOCTYPE html> 
<html> 
<head> 
    <title><%= yield(:page_title) %> | </title> 
    <%= stylesheet_link_tag 'creative/manifest.css', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'creative/manifest.js', 'data-turbolinks-track': 'reload' %> 
    <%= csrf_meta_tags %> 
    <!-- GOOGLE FONT --> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Dosis:400,300,600,700' rel='stylesheet' type='text/css'> 
    <link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin'> 

</head> 

<body class="header-fixed-space-default"> 
<%= render 'layouts/navbar' %> 

<%= yield %> 
<%= render 'layouts/footer' %> 

</body> 
</html> 

有人能帮我找出为什么我不能模仿第一张照片吗?

回答

2

您不能在样式表中包含erb标签<%= %>

要在你的CSS正确链接的图像,你可以使用:

.selector { 
    background-image: url(/assets/image.png); 
} 

.selector { 
    background-image: url("/assets/image.png"); 
} 
+0

你是对的......我不得不做出调整,如果我把“资产/创意/ martin_images“的地址是”资产/创意/资产/创意“,所以我只是把它做成了martin_images。我更新了我的问题以反映这一点。 –