如何链接到css文件中的静态图像？

Question

newb to pyramid and python.我已经能够在我的任何jinja2模板中成功链接到我的静态文件,即:

<link rel="stylesheet" type="text/css" href="{{'myproject:static/mycss.css'|static_url}}"></link>

.css文件加载正常,我可以链接到我的静态文件夹中的任何图像,只要我在jinja模板中这样做.

我想使用图像作为背景,但在链接到我的css文件中的图像时遇到问题:

#mydiv{
background-image:url("{{'myproject:static/myimage.gif'|static_url}}");
}

此链接显示在mycss.css中

"{{'myproject:static/myimage.gif'|static_url}}"

并且不会显示为链接.(如果我加载外部托管的图像作为我的背景图像,它的工作原理)

谢谢!

Answer 1

您的CSS文件是静态文件,因此不被视为模板.所有静态资源都按原样提供,无需任何处理.

CSS文件中的所有非绝对URL都与加载CSS文件的位置有关; 如果使用background-image:url("myimage.gif"),浏览器将相对于CSS文件位置加载图像.由于加载了CSS http://yoursite/static/mycss.css,因此将加载图像http://yoursite/static/myimage.gif.

或者,如果您引用来自异常位置的文件(例如,由您的某个视图自动生成的图像)​​,则必须将CSS文件添加为视图,并使用(文本)模板进行渲染.