logo标签列表

如何在Django中为模板应用背景图片

htmlcssdjangodjango-templates
5
在我的网站中，我需要在一个特定的表格中插入一个图片作为背景。我已经这样做了，但是由于图片尺寸比单元格宽度和高度小，所以它看起来像双重的图像，并导致重叠。在背景图片单元格中，我使用no-repeat来结束同一图片的重复显示，但是它并没有起到作用。我正在使用html在django框架中设计网页。
模板如下：
<td background="{{ STATIC_URL }}images/sample.JPG" no-repeat;>

请问如何取消表格单元格中相同背景图片的重复显示。

谢谢。

6个回答
15

看我是如何做到的： 在模板中，我加入了以下代码：

<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;
}

因此，我获得了一个固定的背景和与屏幕比例相符的效果。

5
"'no-repeat'不是一个有效的HTML属性。为什么不使用style属性或正确的CSS包含文件？"
<td style="background: url('{{ STATIC_URL }}images/sample.JPG') no-repeat;">
创建一个fiddle，以便让人们更好地理解你所遇到的问题。 - Hedde van der Heide
3

试试以下代码，可以帮助您...

它不会重复图片背景，并且还可以将图片拉伸到表格单元格中...

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">
2
注意：background-size是CSS3属性，如果不包含一些JavaScript备份，则在旧浏览器中无法正常工作。 - Hedde van der Heide
1

这对我来说是有效的。如果我们使用带有background-image:url的内联样式，我们必须手动设置路径。

<body id="bg" style="background-image: url('../images/33.jpg')";>
0
.bgded{
      background-image: url( "{% static 'images/ur.jpg' %}");
  }

记得通过添加静态页面来加载

{% load static %}

在你的 HTML 页面顶部。

0

在 CSS 中你会这样做：

#.bg-image {
      
      background-size: 100%;
  
      background-position: center center;
  
      background-repeat: no-repeat; 
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接