input与button按钮背景图失效不显示的解决办法

今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题，一个平时不会发生的怪事情发生了：为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式代码文件中设置了背景图background-image竟然失效不起作用不显示了！笔者查看了这个代码在IE、火狐等各浏览器下的 浏览效果，尽管该代码在DW(DreamWeaver)中显示正常，但是在浏览器中它的背景图片确实没有出现没有显示出来，想了很多解决办法和方案，动用了很多手段，连CSSHACK都用上了，就是不出来了，后来好一顿折腾才搞定，网页前端页面工程师也不好做啊！

原本CSS代码如下：

 background-image: url(images/kankanbei.jpg);
 background-repeat: no-repeat;

后来经过不断调试和探索，最终发现 只需加以下2行代码便可以解决CSS中设置了按钮背景图，但是浏览器中背景图失效不显示的网页前端代码兼容性问题：

 background-image: url(images/kankanbei.jpg);
 background-repeat: no-repeat;
 background-color: transparent;//关键就是将背景色设置为透明，好让背景图显示出来。这个代码在DW的IDE环境下是没有的，需要你手动输入这种背景颜色透明的CSS代码
 border:none;

最后看看呗[kankanbei.com]总结为：外部CSS代码中有某一处设置的属性导致此处按钮的原背景无法去掉，进而导致背景图片失效没显示。另外一种解决就是使用A标签来替代这些input和button标签。

转载于:https://www.cnblogs.com/mooncher/p/3445154.html