首先用PHOTOSHOP做出你想要的样式的图片。具体代码,我就把我以前写的CSS样式表发给你看看,仅供参考。 .btn1 {
成都创新互联公司主营右江网站建设的网络公司,主营网站建设方案,app软件定制开发,右江h5小程序开发搭建,右江网站营销推广欢迎右江等地区企业咨询
height: 20px;
width: 60px;
background-image: url(img/search.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}你只需要把背景图片更改成你的图片就可以了(需要注意图片文件和网页文件保存的位置)。
非IE6浏览器,可以使用input:hover的伪类来控制样式,但IE6浏览器只能用JS来实现了,需要设定两个状态,然后用JS切换类。
style
#c_button { width:92px; height:30px; border:0; float:left;}
.c_up{background:url(../images/i_login_btn.png) no-repeat 0 top;}
.c_down{background:url(../images/i_login_btn.png) no-repeat 0 bottom;}
/style
input name="" id="c_button" class="c_up" type="submit" value="" title="点击登录"/
script type="text/javascript"
document.getElementById("c_button").onmouseover=function() {this.className = "c_down";}
document.getElementById("c_button").onmouseout=function(){this.className = "c_up";}
/script
1.可以利用css的定位元素来实现。
style
.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
/style
div id="up_btn" class="btn"
span添加图片/span
input id="photoimg" type="file" name="photoimg"
/div