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

发布网友发布时间：2022-04-23 02:29

我来回答

共2个回答

热心网友时间：2022-04-21 09:26

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

表哥文字添加到图片？

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

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

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

但其实最好的还是不用图片，直接用样式，而你这个也很像使用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>

热心网友时间：2022-04-21 10:44

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

全部栏目

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