博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
input与button按钮背景图失效不显示的解决办法
阅读量:4842 次
发布时间:2019-06-11

本文共 783 字,大约阅读时间需要 2 分钟。

今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端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

你可能感兴趣的文章
【常见Web应用安全问题】---7、CRLF injection
查看>>
php7.2.1 安装
查看>>
用winrar解压时提示无法设置安全数据 拒绝访问的解决方法
查看>>
诡异的数学,数字问题 - leetcode
查看>>
交换输出
查看>>
设计模式-策略模式&状态模式&访问者模式
查看>>
python学习第三十三节(IO模型)
查看>>
linux pci 驱动小结
查看>>
BZOJ2744: [HEOI2012]朋友圈
查看>>
设计模式之抽象工厂模式
查看>>
大整数相关的几道题
查看>>
利用表格实现大图轮播
查看>>
SpringBoot集成jsp
查看>>
30分钟学会如何使用Apache Shiro
查看>>
asp.net部署时加密config文件
查看>>
想开个网店的。。学习一下vancl的分析
查看>>
DDD:在基于关系数据库的领域,聚合的边界等于并发管理的边界。
查看>>
poj 1961 Period
查看>>
BZOJ1560: [JSOI2009]火星藏宝图
查看>>
play framework 相关
查看>>