如何在django中为模板应用背景图像

use*_*641 1 html css django django-templates

在我的网站中,在特定的表格中,我必须插入图像作为背景.我这样做但图像看起来像双图像,因为图像小于单元格宽度和高度,它正在重叠.

在背景图像单元格中,我使用no-repeat来结束相同图像的重复显示,但它不起作用.我正在使用django框架中的html设计网页.

模板是

<td background="{{ STATIC_URL }}images/sample.JPG" no-repeat;> 
Run Code Online (Sandbox Code Playgroud)

我是否知道如何取消在表格单元格中重复显示相同的背景图像.

谢谢

小智 6

看看我是怎么做到的:在模板中我放了以下几行:

<body id="bg" style="background-image: url('{% static "images/33.jpg"%}')";>
Run Code Online (Sandbox Code Playgroud)

并在CSS中:

#bg{
    background-size: 1800px 900px;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
}
Run Code Online (Sandbox Code Playgroud)

结果我获得了固定的背景和屏幕的比例.


Hed*_*ide 5

'no-repeat'不是有效的 html 属性。为什么不使用 style 属性或适当的 css 包含文件?

<td style="background: url('{{ STATIC_URL }}images/sample.JPG') no-repeat;"> 
Run Code Online (Sandbox Code Playgroud)


Pan*_*ian 4

尝试如下...它将帮助您...

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>
Run Code Online (Sandbox Code Playgroud)

要支持旧浏览器,您可以将以下行添加到 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) */
Run Code Online (Sandbox Code Playgroud)

HTML:

<td class="tdStyle"> 
Run Code Online (Sandbox Code Playgroud)

  • 注意:background-size 是一个 CSS3 属性,如果不包含一些 javascript 备份,它将不适用于较旧的浏览器。 (2认同)