HTML tables_html/css_WEB-ITnose に挿入された背景画像が繰り返し表示される問題について-htmlチュートリアル-php.cn

問題のあるコードから始めましょう (実際、問題があるとは言えません。結局のところ、構文には問題はありませんが、効果は期待したものではありません?? 期待される効果は得られると仮定します)背景画像が複数回ではなく 1 回だけ塗りつぶされるということです。)

ページの効果は次のとおりです。

画像を表示するには、タグの属性を少し変更します。 1 回だけ? 代わりに、style 属性を使用して背景画像を設定します。背景属性を直接設定します。コードは次のとおりです。

<span style="font-size:18px;"><html><head>    <title>设定表格的背景图像</title></head><body>    <table border=3 width=400 height=100 bordercolor=#336699 background="test.png">        <tr>            <td>姓名</td>            <td>张三</td>        </tr>        <tr>            <td>性别</td>            <td>男</td>        </tr>        <tr>            <td>年龄</td>            <td>20</td>        </tr>    </table></body></html></span>

ログイン後にコピー

ページの効果は次のとおりです。

重要な点は、次の値の設定にあります。。画像を非リピートにする「no-repeat」値に加えて、いくつかの値が利用可能です:

repeat: ページ全体を左、右、上、下に並べて表示します

repeat -x: X 軸上で左右に並べて表示します

repeat-y: Y 軸上で上下に並べて並べて表示します

no-repeat: 画像は繰り返されません

inherit: 継承します

お願いします具体的な効果を自分でテストしてみてください。

さらに、表のセルに画像を追加する必要があることがよくあります。上記のように背景として画像を追加することに加えて、画像を要素として追加することもよくあります。コードは次のとおりです:

<span style="font-size:18px;"><html><head>    <title>设定表格的背景图像</title></head><body>    <table border=3 width=400 height=100 bordercolor=#336699 style="background-image:url(test.png); background-repeat:no-repeat">        <tr>            <td>姓名</td>            <td>张三</td>        </tr>        <tr>            <td>性别</td>            <td>男</td>        </tr>        <tr>            <td>年龄</td>            <td>20</td>        </tr>    </table></body></html></span>

ログイン後にコピー

ページの効果は次のとおりです:

PS: なぜこの人がそうなのかは聞かないでください。頭がとても太いので、言いたいのは、この方法で追加した画像の幅（幅）と高さ（高さ）の値を任意に設定できることです（もちろん、設定できないこともあります）デフォルトのサイズ）。