Rumah > hujung hadapan web > html tutorial > 关于在HTML表格中插入背景图片图片重复显示的问题_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:44:26
asal
4512 orang telah melayarinya

先来一段有问题的代码(其实也不能说是有问题,毕竟语法上是没问题的,只是出来的效果不是我们想要的??我们假设预期的效果是背景图片只填充一次而不是多次。)

<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>
Salin selepas log masuk

页面效果是:

我们稍微修改一下

标签的属性就可以让图片只出现一次??通过style属性来设置背景图片,而不是直接设置background属性,代码如下:

<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>
Salin selepas log masuk
页面效果是:

其中,关键点在于后面的值的设置。除了"no-repeat"这个使图片不重复的值,还有一下几个值可选:

  • repeat: 平铺整个页面,左右与上下
  • repeat-x: 在x轴上平铺,左右
  • repeat-y: 在y轴上平铺,上下
  • no-repeat: 图片不重复
  • inherit: 继承
  • 具体效果请大家自测!


    另外,我们大家平时可能经常需要在表格的单元格内添加图片。除了和上面一样添加图片作为背景外,我们更常用的可能是把图片作为一个元素添加,代码如下:

    <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     style="max-width:90%"  style="max-width:90%" src="test.png" alt="关于在HTML表格中插入背景图片图片重复显示的问题_html/css_WEB-ITnose" >            </td>        </tr>    </table></span>
    Salin selepas log masuk
    页面效果是:

    PS:别问我为什么这人的头那么胖,我只想说:以这种方式添加的图片,宽(width)高(height)值可以任意设置(当然也可以不设置,那样就是默认大小)。

    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan