开发者社区> 问答> 正文

symfony2前台模板中css导入后背景图片不显示

symfony2管理css后,css中定义有背景图片,symfony2改变了css的路径,却没有改变css内定义的背景图片的路径,导致背景图片无法显示,怎么办?先谢谢大家了!

展开
收起
杨冬芳 2016-06-03 14:03:56 2297 0
1 条回答
写回答
取消 提交回答
  • IT从业

    如果你是使用的 Assetic 的话,那么你需要添加 cssrewrite fileter,即:

    {% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}

    这个过滤器是什么意思呢?

    在你 assets:dump(或者 assets:install) 的时候,Symfony2 会将你的静态文件(CSS)从 Bundle 中移出到 Web 根目录,因此有些文件的路径就发生了变化(比如在css中引用的图像),从而导致了主题所说的问题。

    因此 cssrewrite 过滤器就是专门用来计算 css 与图像之间的相对关系,并直接更新 CSS 中的路径。

    跟你举个实际应用中的例子,你现在有两个文件 logo.png 和 style.css

    /src/AppBundle/Resources/public/img/logo.png
    /src/AppBundle/Resources/public/css/style.css

    你在 style.css 里引用 logo.png 需要 ../img/logo.png,对吧?

    现在,当你 assets:dump 时,Symfony2Assetic 组件会将 logo.png style.css 导出到 /web 目录,因为 /src 下是不能直接访问的,现在 logo.png 和 style.css 将会被导出在新目录:

    /web/bundles/app/img/logo.png
    /web/css/11e4a17.css

    你会看到,11e4a17.css(style.css 被重命名后的文件) 和 logo.png的相对关系已经发生了变化,原先的 ../img/logo.png 已经不能引用到 logo.png 了,cssrewrite 的意义就在于,它将更新 11e4a17.css(style.css) 中的 ../img/logo.png ../bundles/app/img/logo.png

    啰嗦说这么多,希望能帮到题主。

    2019-07-17 19:26:32
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
23-Vue.js在前端...1506518547.pdf 立即下载
低代码开发师(初级)实战教程 立即下载