CSS设置按钮背景图片
1、找一款编辑软件,打开后新建一个按钮(这里用DW)
网页效果图如下:
2、选择一张给按钮添加的背景图片,然后从css里设置一下:如下图所示
实现的效果网页如下:
边框属性用: border:1px solid #颜色即可;
1.可以利用css的定位元素来实现。<style>
.btn{position: relativeoverflow: hiddenmargin-right: 4pxdisplay:inline-block*display:inlinepadding:4px 10px 4pxfont-size:14pxline-height:18px*line-height:20pxcolor:#ffftext-align:centervertical-align:middlecursor:pointerbackground-color:#5bb75bborder:1px solid #ccccccborder-color:#e6e6e6 #e6e6e6 #bfbfbfborder-bottom-color:#b3b3b3-webkit-border-radius:4px-moz-border-radius:4pxborder-radius:4px}
.btn input {position: absolutetop: 0 right: 0margin: 0border: solid transparentopacity: 0filter:alpha(opacity=0) cursor: pointer}
</style>
<div id="up_btn" class="btn">
<span>添加图片</span>
<input id="photoimg" type="file" name="photoimg">
</div>
如果你只想用css来实现这个效果的话,那你只能用<a></a>标签了,利用它的hover属性来做这种效果;举个例子;
<div class="btn"><a>按钮</a></div>
.btn a{background:url(图片1路径) no-repeatwidth:图片宽度height:图片高度}
.btn a:hover{background:url(图片2路径) no-repeatwidth:图片宽度height:图片高度}
又或者你也可以用JS来做,先做两个类,一个放正常的图片另一个放下陷的图片,然后使用onmousedown来调用这两个类