4

私のサイトでは、特定の表に背景として画像を挿入する必要があります。私はそれをしましたが、画像がセルの幅と高さよりも小さいため、画像が二重の画像のように見えます。

背景画像セルで、同じ画像の繰り返し表示を終了するために no-repeat を使用しましたが、機能していません。django フレームワークで html を使用して Web ページを設計しています。

テンプレートは

<td background="{{ STATIC_URL }}images/sample.JPG" no-repeat;>

表のセルで同じ背景画像を繰り返し表示するのをキャンセルする方法を教えてください。

ありがとう

4

6 に答える 6

13

私がどのようにやったか見てください：テンプレートに次の行を入れました：

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

その結果、固定された背景と画面の縦横比が得られました。

于 2017-02-02T17:07:31.930 に答える
5

'no-repeat'は有効な html 属性ではありません。style 属性または適切な css インクルード ファイルを使用しないのはなぜですか?

<td style="background: url('{{ STATIC_URL }}images/sample.JPG') no-repeat;">
于 2013-04-15T12:19:46.210 に答える
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">
于 2013-04-15T12:28:02.027 に答える
0 
.bgded{
      background-image: url( "{% static 'images/ur.jpg' %}");
  }

追加して静的ページをロードすることを忘れないでください

{% load static %}

あなたのhtmlページの上部にあります。

于 2020-09-19T22:13:04.743 に答える