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。

资产已正确安装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')，知道它不会起作用，但想弄清楚它是如何处理 link 的。

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

我应该怎样做才正确？

在回答之前你应该问自己的奖励问题：当我从 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 来管理资产。

Symfony 3 使用 CSS 设置背景图片

Symfony 3 set background image using CSS

css

background-image

symfony