css中怎么给表格加背景图

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中可以使用background-image给表格添加背景图,具体操作如下:table { background-image: url(图片路径); background-repeat: no-r

CSS中可以使用background-image给表格添加背景图,具体操作如下:

table {
  background-image: url(图片路径);
  background-repeat: no-repeat; /*不重复*/
  background-size: cover; /*图片尺寸覆盖整个表格*/
} 

其中,url()中的图片路径可以是相对路径或绝对路径。background-repeat控制图片是否重复,no-repeat表示不重复。background-size控制图片尺寸,cover表示图片覆盖整个表格。

下面是一个具体的例子:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

table {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
} 

在上面的例子中,为表格添加了一个名为bg.jpg的背景图。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么给表格加背景图

粉丝

0

关注

0

收藏

0

已有0次打赏