Regarding the issue of repeated display of background images inserted into HTML tables_html/css_WEB-ITnose

Let’s start with a piece of problematic code (actually, it can’t be said to be problematic, after all, there is no problem with the syntax, but the effect is not what we want?? We assume that the expected effect is that the background image only Fill it once instead of multiple times)

<span style="font-size:18px;">    <title>设定表格的背景图像</title>    <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></span>

The page effect is:

Let’s modify it slightly

The attribute of the label can make the image appear only once?? Set the background image through the style attribute instead of directly setting the background attribute. The code is as follows:

<span style="font-size:18px;">    <title>设定表格的背景图像</title>    <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></span>

The page effect is :

The key point lies in the setting of the following values. In addition to the "no-repeat" value that prevents images from being repeated, there are several other values ​​available:

repeat: tile the entire page , left and right and up and down

repeat-x: Tile on the x-axis, left and right

repeat-y: Tile on the y-axis, up and down

no-repeat: The pictures are not repeated

inherit: inherit

Please test yourself for the specific effect!

In addition, we all may often need to add pictures to cells in tables. In addition to adding pictures as backgrounds as above, we may more commonly add pictures as an element. The code is as follows:

<span style="font-size:18px;">    <title>设定表格的背景图像</title>    <table border="3" width="400" height="100" bordercolor="#336699">        <tr>            <td>姓名</td>            <td>张三</td>        </tr>        <tr>            <td>性别</td>            <td>男</td>        </tr>        <tr>            <td>年龄</td>            <td>20</td>        </tr>        <tr>            <td>头像</td>            <td>                <img  src="/static/imghwm/default1.png" data-src="test.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Regarding the issue of repeated display of background images inserted into HTML tables_html/css_WEB-ITnose" >            </td>        </tr>    </table></span>

The page effect is:

PS: Don’t ask me why this person’s head is so fat. I just want to say: for pictures added in this way, the width (width) and height (height) values ​​​​can be set arbitrarily (of course, it can also be set without setting, that will be the default size).