Regarding the issue of repeated display of background images inserted into HTML tables_html/css

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

Copy after login

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

Copy after login

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;"><html><head>    <title>设定表格的背景图像</title></head><body>    <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 width="200" height="100" src="test.png"/>            </td>        </tr>    </table></body></html></span>

Copy after login

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).

Related labels：

关于在HTML表格中插入背景图片图片重复显示的问题

source：php.cn

Previous article：Heritrix only crawls specific pages such as html and htm_html/css_WEB-ITnose Next article：css special effects_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn