HTML5中background属性已废弃，必须用CSS background-image替代；需统一写在CSS中，用类名控制，设置repeat、size、position，并确保单元格有高度；tr不可直接设背景，应作用于td；文字需用伪元素遮罩或text-shadow提升可读性。
用 background-image 替代已废弃的 background 属性
HTML 的 background 属性（如 <td background="bg.jpg">）在 HTML5 中已被完全移除，现代浏览器可能仍兼容但不保证渲染，且无法响应式控制或叠加其他背景效果。必须改用 CSS 的 background-image。
实操建议：
- 所有背景图片控制统一写在 CSS 中，避免内联
style除非调试需要 - 优先使用类名选择器（如
.cell-bg），而非直接选td，便于复用和覆盖 - 记得同时设置
background-repeat: no-repeat和background-size: cover，否则小图会平铺、大图会被裁切
给单个单元格加背景图：用类名 + background-image
最常见需求是只让某几列或某几个 td 显示背景图，而不是整张表。这时候不能靠 table 或 tr 统一设，得精确到单元格。
示例写法：
立即学习“前端免费学习笔记（深入）”；
<td class="hero-cell">内容</td>
CSS 配套：
.hero-cell {
background-image: url("pattern.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
/* 必须设高度或有足够内容撑开，否则背景不可见 */
min-height: 60px;
}注意点：
-
background-position默认是0 0（左上角），常需调整为center或right bottom对齐内容 - 如果单元格没内容或高度塌陷，背景图不会显示——加
min-height或padding是最快验证方式 - 路径错误时浏览器静默失败，检查 DevTools 的 Network 标签页是否 404
表格行（tr）加背景图的陷阱
直接对 tr 设置 background-image 在多数浏览器中无效，因为 tr 不是“可绘制背景”的渲染盒（rendering box），背景会透传给子 td，导致行为不可控。
正确做法只有两种：
- 给整行的每个
td单独加相同背景（适合简单平铺） - 改用
tbody或包裹div模拟行容器（适合复杂渐变/图层叠加）
不推荐的写法：
tr.highlight { background-image: url("row-bg.jpg"); } // 大概率不生效推荐替代：
tr.highlight td {
background-image: url("row-bg.jpg");
background-size: 100% 100%;
}透明文字+背景图的可读性问题
背景图一旦加上，文字容易看不清，尤其是浅色图配白字、深色图配黑字。CSS background-blend-mode 或伪元素遮罩是更可控的解法，比调 opacity 安全。
实用组合：
- 用
::before伪元素盖一层半透黑幕：background: rgba(0,0,0,0.3)，再叠文字 - 避免对
td直接设opacity，否则整个单元格（含边框、子元素）都会变透明 - 字体颜色别硬写
#fff或#000，用color: white配合text-shadow: 0 1px 2px black提升对比度
真正麻烦的不是加图，而是让图存在、不干扰信息传达、还能适配不同屏幕尺寸——这些细节在写第一行 CSS 时就得想好。
