HTML表格利用CSS Background-blend-mode实现复杂单元格纹理-html教程-PHP中文网

background-blend-mode在td上无效，是因为它仅作用于同一元素的多层背景，而单独设置background-color或background-image无法构成多层；必须用逗号分隔的复合background声明（如图片、渐变、纯色），并显式设置各层background-size和background-repeat。

html表格利用css background-blend-mode实现复杂单元格纹理

background-blend-mode 在 `td` 上为什么没反应？

直接给 td 写 background-blend-mode: multiply 却看不到纹理，几乎肯定是背景层没凑够——它必须作用于**同一元素的多个背景图层**，而你很可能只写了 background-image 或只写了 background-color。浏览器压根不认为这是“混合场景”，属性直接被忽略。

常见翻车点：

background-color: #f0f0f0; 和 background-image: url("noise.png"); 分两行写 → 浏览器只保留后者，background-blend-mode 失去混合对象
background: url("noise.png") no-repeat; 这种单值简写 → 等价于只有图片一层，不触发混合
纹理图是 JPG 且带 ICC 配置文件 → Safari / 旧 Chrome 渲染异常，甚至全黑或全白
td 没设 height 或内容为空 → 背景区域坍缩，纹理根本没渲染空间

怎么写才算 valid 的多层背景？

必须把所有图层塞进一条 background 声明，用逗号分隔，顺序即叠放关系：前面的是上层，后面的是底层。颜色不能用 background-color 单独写，得伪装成渐变或直接写成逗号中的一项。

正确示例（用于 td）：

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

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

下载

td.textured {
  background: url("noise.png"), linear-gradient(45deg, #f9f9f9, #e8e8e8), #fff;
  background-blend-mode: multiply;
  background-size: 16px 16px, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
}

关键细节：

url("noise.png") 放最前 → 它是上层纹理，盖在渐变和纯色之上
#fff 写在逗号最后 → 它是底层 fallback 色，参与混合，不是单纯兜底
background-size 和 background-repeat 必须显式声明，否则默认 auto 会拉伸纹理或重复错位
渐变用 linear-gradient 而非 background-color，否则无法成为独立图层

hover 时切换 blend 模式要注意什么？

想让单元格 hover 时纹理变深或提亮，直接改 background-blend-mode 值就行，但有隐性陷阱：

别在 :hover 里只写 background-blend-mode: overlay; —— 如果基础状态没定义完整背景，hover 时整个背景可能回退到单层，混合失效
过渡动画要加在 background-blend-mode 上，但别配 transition: all —— 它会触发重绘抖动，尤其在低端安卓 WebView 中
td 若套了 border-collapse: collapse，hover 时 border 可能干扰背景定位，建议统一用 border-spacing: 0 + 单独边框控制
移动端 Safari 对 background-blend-mode 切换响应慢，可加 will-change: background-blend-mode 提前提示渲染引擎