如何在 django 中为模板应用背景图像
Posted
技术标签:
【中文标题】如何在 django 中为模板应用背景图像【英文标题】：How to apply background image for an templates in django 【发布时间】：2013-04-07 13:14:09 【问题描述】：在我的网站中，我必须在特定的表格中插入一张图片作为背景。我这样做了，但图像看起来像双图像，因为图像小于单元格的宽度和高度，它正在重叠。
在背景图像单元格中，我使用 no-repeat 来结束同一图像的重复显示，但它不起作用。我正在使用 django 框架中的 html 设计网页。
模板是
<td background=" STATIC_URL images/sample.JPG" no-repeat;>
请问如何取消表格单元格中相同背景图片的重复显示。
谢谢
【问题讨论】：
【参考方案1】：看看我是怎么做到的： 在模板中，我输入了以下行：
<body id="bg" style="background-image: url('% static "images/33.jpg"%')";>
在css中：
#bg
background-size: 1800px 900px;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
结果我得到了一个固定的背景和屏幕的比例。
【讨论】：
【参考方案2】：'no-repeat' 不是有效的 html 属性。为什么不使用 style 属性或适当的 css 包含文件？
<td style="background: url(' STATIC_URL images/sample.JPG') no-repeat;">
【讨论】：
创建fiddle，让人们更好地了解您遇到的问题【参考方案3】：试试下面...它会帮助你...
它是no repeats the image background，它也是Stretch the image to Table Cell..
CSS：
<style>
.tdStyle
background-image:url(' STATIC_URL images/sample.JPG');
background-repeat:no-repeat;
background-size:100%;
</style>
要支持旧浏览器，您可以在 CSS 中添加以下行：
-moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100%; /* Opera 9.5 */
-webkit-background-size: 100%; /* Safari 3.0 */
-khtml-background-size: 100%; /* Konqueror 3.5.4 */
-moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */
HTML：
<td class="tdStyle">
【讨论】：
注意：background-size 是一个 CSS3 属性，如果不包含一些 javascript 备份，它将不适用于旧版浏览器。【参考方案4】：在 CSS 中你会这样做：
#.bg-image
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
【讨论】：
【参考方案5】：.bgded
background-image: url( "% static 'images/ur.jpg' %");
记得通过添加加载静态页面
% load static %
在您的 html 页面的顶部。
【讨论】：
【参考方案6】：这对我有用。如果我们使用带有 background-image:url 的内联样式，我们必须手动创建路径。
<body id="bg" style="background-image: url('../images/33.jpg')";>
【讨论】：
以上是关于如何在 django 中为模板应用背景图像的主要内容，如果未能解决你的问题，请参考以下文章
如何在 iOS5 中为单个 UITabItem 添加背景图像？
如何在 django 模板中为循环创建唯一的 javascript 变量名？