Question

html怎么把这个表格文字添加到图片中的？





Answer 1

这个用的是热点地图？img+map地图制作，但是这个方法并不容易。

表哥文字添加到图片？

其实就是设定每一个表格元素的背景图片，而这个背景图片不只是前者的那么漂亮高端上档次，直接是一个简简单单的设计刚好是表格文字大小的图片就可以了。

table#useBackground td {
    background: url(..) no-repeat 0 0;
    background-size: 100% 100%;
}

图片设计完了之后就可以了。如果不是这样子的话，那这些其实并不是文字，就是图片来的。使用SVG等可以设计矢量图，矢量图中间设计几个字形包括几个字就可以了。你可以查看一下你的源文件的代码，然后你就可以知道了是什么回事。

<table>
    <tr style="background: url(..) no-repeat">
        <td>宝贝类目</td>
        <td>集市</td>
        <td>品牌商店</td>
    </tr>
</table>

但其实最好的还是不用图片，直接用样式，而你这个也很像使用CSS样式制作的。

<table>
    <tr>
        <td style=" ">宝贝类目</td>
        <td>集市</td>
        <td>品牌商店</td>
    </tr>
</table>
<style>
    td{
        border-radius: 2px;
        background:filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
        -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/	
        background:red; /* 一些不支持背景渐变的浏览器 */  
        background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  
        background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
    }//更改颜色即可
    td:first-child, td.active {
        background: ..;//第一个元素或者是可以是当前元素（class=active）的颜色更改
        transform: scale(1.2);//放大
    }
    tr{
        border-bottom: 2px solid #00ffff
    }
</style>

Answer 2

图片作为表格文字所在元素的背景图片就可以了。

追问

具体怎么操作？

你回的话可不可以把文字标签打出来让我看看

追答

<div style="background-image:url('photo.png');height: 300px;width: 300px;">
    <h3 style="text-align: center;">我是标题</h3>
    <p style="text-align: center;">我是内容啦啦啦啦</p>
</div>

追问

你的跟我的不太一样

追答

本来 就没做的和你一样 思路 给你了 还不会 就等老师 和你说