按钮背景图必须用css background-image实现，禁用无效的src属性；需设background-color降级、padding控间距、遮罩或阴影保文字可读性，适配retina屏并克制交互态纹理变化。
button 背景图用 background-image 不要用 src
HTML 的 <button></button> 是行内替换元素，不支持 src 属性——如果写成 <button src="bg.png">加入购物车</button>，浏览器直接忽略 src，什么也不会发生。必须用 CSS 的 background-image 控制纹理底图。
常见错误现象：按钮文字看不见、图片拉伸变形、点击区域变小、移动端点不中。
- 纹理图建议用 PNG（透明背景）或 SVG（缩放不失真），避免 JPG 的边缘硬边和压缩噪点
- 加
background-size: cover或contain，别留默认平铺（repeat）——购物车按钮通常只想要一张居中纹理 - 务必设
background-color作为降级色：万一图片加载失败或被用户禁用图片，按钮仍有可读性 - 用
padding控制文字间距，别依赖图片内留白；否则换文案或字体时容易溢出
防止文字被纹理盖住：加半透明白色遮罩或文字阴影
很多纹理底图对比度低（比如浅灰麻布纹、米色纸浆纹），直接放黑字会看不清。纯靠改字体颜色治标不治本——深色纹理上白字又可能发灰。
- 推荐方案：用
background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url(bg-texture.png)叠一层柔和遮罩 - 备选方案：加
text-shadow: 0 1px 2px rgba(0,0,0,0.3)，尤其适合细线纹理 - 避免用
opacity整体降透明度——按钮交互态（:hover,:active）会同步变淡，丧失反馈感
适配高 DPR 屏幕（如 Retina）要提供 2x 图片
在 MacBook 或 iPhone 上，普通 1x 纹理图会模糊。CSS 本身不识别“@2x”，得靠 background-image 配合媒体查询或 image-set()。
- 最稳写法（兼容 Chrome/Firefox/Safari）：
background-image: image-set("bg-texture.png" 1x, "bg-texture@2x.png" 2x); - 降级写法（所有浏览器都认）：用
@media (-webkit-min-device-pixel-ratio: 2)单独覆盖background-image - 文件命名统一，比如
cart-btn-wood.png和cart-btn-wood@2x.png，避免混淆 - 别把纹理图做得太大——120×40px 按钮配 240×80px @2x 图就够了，体积翻倍但效果几乎无差别
按钮交互态（hover/active）的纹理变化要克制
很多人给 :hover 换一张深色纹理，结果鼠标一移上去整个按钮“闪一下”，干扰用户判断。纹理本质是基底，不是主视觉动效。
- 优先调
background-color透明度或遮罩层强度，比如 hover 时把rgba(255,255,255,0.6)改成rgba(255,255,255,0.8) - 慎用
background-position做位移动画——纹理轻微抖动比不动更让人分心 - 如果真要换图，确保两张纹理尺寸、明暗、方向一致，否则像按钮“突然换皮肤”
- 移动端没有 hover，记得用
@media (hover: hover)包裹 hover 样式，避免误触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
