TABLE 的 BACKGROUND 属性已废弃,必须用 CSS 实现背景图;需同时设置 table 背景、td/th 透明、border-collapse: collapse;优先用 class 控制单元格背景;复杂效果用 table::before 伪元素。

TABLE 的 BACKGROUND 属性早已失效,别再用了
HTML5 中 即使写了 漏掉任意一项,图就卡在“好像写了又没完全显示”的状态。 想让某几列带纹理、某几行高亮?直接给 正确做法是定义一个 class: 当你要实现“背景图固定不动、内容滚动”“叠加半透明遮罩”“模糊底层数据”这类效果时,直接在 注意两个关键点:一是 真正难的不是写对那几行 CSS,而是意识到 background-image 不继承、不穿透、不自动适配高度——它永远只作用于当前元素的盒模型范围内,而表格的盒模型又特别容易被子元素干扰。 是废弃语法,所有现代浏览器都忽略它。你写上
background="bg.jpg",控制台不会报错,但图片就是不显示——这不是路径问题,是浏览器直接丢弃了这个属性。它只存在于 HTML 4.01 和更早的规范里,连 IE11 都已不支持渲染,更别说 Chrome/Firefox/Safari。如果你在老教程或生成器代码里看到这行,立刻删掉,换成 CSS 方案。给 table 元素加背景图必须处理三层遮挡
table { background-image: url("grid.png"); },也大概率看不到图。原因很实际:表格内部的 、 默认有背景(通常是白色或透明但受父级影响),会盖住 table 的背景。要让它可见,得同时做三件事:
table 设置 background-image + background-size: cover + background-repeat: no-repeat
td, th 显式设为 background-color: transparent(不能只写 background: none,因为可能继承其他值)table 加 border-collapse: collapse,否则单元格间隙会让背景图露出“白边”单元格级背景图优先用 class 而非内联 style
加样式,别用 style="background-image: url(...)..."。内联写法有三个硬伤:
url("my bg.png"))容易因引号嵌套出错,浏览器静默失败td:hover 或主题色覆盖容易失效.cell-pattern { background-image: url("dot.png"); background-repeat: repeat; },然后在 HTML 里干净地挂载。复杂背景需求请用 ::before 伪元素
table 上设 background-image 就不够用了。这时候必须切到伪元素方案:table {
position: relative;
}
table::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url("texture.jpg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
table 必须有 position: relative,否则 ::before 会相对 body 定位;二是 z-index: -1 不可省,否则伪元素会浮在表格内容上面。IE11 及以下不支持该方案,需降级 fallback(比如退回到纯色背景)。











