css - Symfony 3 使用 CSS 设置背景图片

Question

“Symfony 2 set background image using CSS”提供的答案在 Symfony 3 中不再有效。所以我对下一个版本提出了同样的问题:

我想从 CSS 中放置一个背景图片，我该怎么做？

我尝试了什么:

/* src/SiteBundle/Resources/public/css/style.css */
#element {
  background: url('../images/image.jpg');
}

图像位于 src/SiteBundle/Resources/public/images/image.jpg。

Assets 已通过 console asset:install --symlink 正确安装，一切顺利。

Assetic 是使用 composer 手动安装的。

CSS 加载了:

<!-- app/Resources/views/base.html.twig -->
{% stylesheets '@SiteBundle/Resources/public/css/*.css' filter='cssrewrite' %}
  <link rel="stylesheet" href="{{ asset_url }}" type="text/css">
{% endstylesheets %}

我得到了什么:

当我查看浏览器检查器时，它告诉我 css 属性是

background: url('../../Resources/public/images/image.jpg')

这显然是行不通的。

我尝试解决的问题:

我尝试将 CSS 背景属性更改为 url('images/image.jpg')，我知道它不会起作用，但要弄清楚它是如何处理链接的。

浏览器检查器告诉我链接现在是 url('../../Resources/public/css/images/image.jpg')，告诉我我没办法更改 ../../Resources/public/ 部分。

我应该如何正确处理它？<​​/strong>

在回答之前你应该问自己的奖励问题:当我从 dev 切换到 prod 时，你的答案是否有效？

Answer 1

When using the cssrewrite filter, don't refer to your CSS files using the @AppBundle syntax. http://symfony.com/doc/current/cookbook/assetic/asset_management.html#fixing-css-paths-with-the-cssrewrite-filter

还有:

Best Practice:

Store your assets in the web/ directory.

所以你可能应该使用:

{% stylesheets 'bundles/site/css/*.css' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" type="text/css">
{% endstylesheets %}

这对 prod 和 dev 都有效吗？我真的不知道，因为我正在使用 gulp 来管理 Assets 。