HTML表格怎么控制背景图片的平铺方式（代码分享）-html教程-PHP中文网

table元素的background-image默认在整表背景区域（含边框、内边距）内从左上角开始双向重复平铺；需配合background-repeat属性控制平铺方式，如no-repeat取消平铺、repeat-x仅横向平铺等，且必须与background-image同时使用才生效。

html表格怎么控制背景图片的平铺方式（代码分享）

table 元素的 background-image 默认怎么平铺

HTML <table> 上直接设 <code>background-image 时，浏览器按 CSS 默认行为处理：图片会**在 table 元素的整个背景区域（含边框、内边距）内重复平铺**，且平铺起点从 table 的 content-box 左上角开始。这不是单元格级控制，而是整张表作为一个块级容器渲染背景。

用 background-repeat 控制平铺方式（最常用）

关键不是 table 特殊，而是它遵循标准 CSS 背景规则。直接在 <table> 或其父容器上设置 <code>background-repeat 即可：

table {
  background-image: url('pattern.png');
  background-repeat: no-repeat;     /* 不平铺 */
  /* background-repeat: repeat-x;   ← 只横向平铺 */
  /* background-repeat: repeat-y;   ← 只纵向平铺 */
  /* background-repeat: space;      ← 等间距铺满，不裁剪 */
  /* background-repeat: round;      ← 拉伸缩放以铺满，可能变形 */
}

注意：background-repeat 必须和 background-image 同时存在才生效；单独写它无效。

想让每格（td/th）独立显示背景图？别套在 table 上

如果目标是每个单元格显示不同/独立的背景图（比如图标+文字），把样式写在 <td> 或 <code><th> 上更可靠：<pre class="brush:php;toolbar:false;">td.icon-cell { background-image: url('check.svg'); background-repeat: no-repeat; background-position: center left 8px; padding-left: 32px; }</pre> <p>常见错误：</p> <ul><li>给 <code><table> 设了背景图，又给 <code><td> 设透明背景——结果看不见 td 的内容，因为 table 背景被 td 的默认白色覆盖了<li>用 <code>background-attachment: fixed → 在表格滚动时背景会“卡住不动”，视觉错乱，慎用

background-size 和 background-position 联合调位置和缩放

仅靠 no-repeat 还不够？加这两个才能精准定位：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

table {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-position: right bottom;  /* 靠右下角显示 */
  background-size: 120px auto;        /* 宽 120px，高自动等比 */
  /* background-size: contain;        ← 缩放到完全可见 */
  /* background-size: cover;          ← 缩放到完全覆盖，可能裁剪 */
}

注意：background-position 值是相对于 table 的 padding-box（即内边距边界）计算的，不是 border-box。如果 table 有 border-collapse: collapse，border 不占额外空间，但 padding 仍影响定位基准。

真正麻烦的是混合场景：既要整表底纹又要单格图标，得拆开控制层级——table 负责大背景，td/th 负责局部装饰。漏掉 background-color: transparent 在 td 上，就容易盖掉 table 的背景。