HTML tables_html/css_WEB-ITnose に挿入された背景画像が繰り返し表示される問題について

WBOY
リリース: 2016-06-24 11:44:26
オリジナル
4498 人が閲覧しました

問題のあるコードから始めましょう (実際、問題があるとは言えません。結局のところ、構文には問題はありませんが、効果は期待したものではありません?? 期待される効果は得られると仮定します)背景画像が複数回ではなく 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: なぜこの人がそうなのかは聞かないでください。頭がとても太いので、言いたいのは、この方法で追加した画像の幅(幅)と高さ(高さ)の値を任意に設定できることです(もちろん、設定できないこともあります)デフォルトのサイズ)。


    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート