在我的网站中,在一个特别的表格中,我必须插入一个图像作为背景。我这样做了,但图像看起来像双图像,因为图像小于单元格的宽度和高度,它正在重叠。
在背景图像单元格中,我使用 no-repeat 来结束同一图像的重复显示,但它不起作用。我正在使用 django 框架中的 html 设计网页。
模板是
<td background="{{ STATIC_URL }}images/sample.JPG" no-repeat;>
请问如何取消表格单元格中相同背景图像的重复显示。
谢谢
在我的网站中,在一个特别的表格中,我必须插入一个图像作为背景。我这样做了,但图像看起来像双图像,因为图像小于单元格的宽度和高度,它正在重叠。
在背景图像单元格中,我使用 no-repeat 来结束同一图像的重复显示,但它不起作用。我正在使用 django 框架中的 html 设计网页。
模板是
<td background="{{ STATIC_URL }}images/sample.JPG" no-repeat;>
请问如何取消表格单元格中相同背景图像的重复显示。
谢谢
看看我是怎么做到的:在模板中,我输入了以下行:
<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;
}
结果,我获得了固定的背景和屏幕的比例。
'no-repeat'
不是有效的 html 属性。您为什么不使用样式属性或正确的 css 包含文件?
<td style="background: url('{{ STATIC_URL }}images/sample.JPG') no-repeat;">
尝试如下...它会帮助你...
它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">
在 CSS 中你会做:
#.bg-image {
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
}
这对我有用。如果我们使用带有 background-image:url 的内联样式,我们必须手动创建路径。
<body id="bg" style="background-image: url('../images/33.jpg')";>
.bgded{
background-image: url( "{% static 'images/ur.jpg' %}");
}
请记住通过添加加载静态页面
{% load static %}
在您的 html 页面的顶部。