CSS按钮背景鼠标放上去变换背景的代码怎么设置?

html-css012

CSS按钮背景鼠标放上去变换背景的代码怎么设置?,第1张

假设你的按钮的class是btn,两个背景图片分别是bg1.jpg和bg2.jpg,那么可以这样来做\x0d\x0acss部分:\x0d\x0a.btn {background:url(bg1.jpg)}\x0d\x0a.btn:hover {background:url(bg2.jpg)}\x0d\x0a\x0d\x0ahtml部分就很简单了,给input加个样式就行\x0d\x0a\x0d\x0a\x0d\x0a使用这个样式时别忘了先把input的默认样式,那些padding、margin、border什么的都清零,然后再定义一下宽高,这样出来的视觉效果会好些。

CSS设置按钮背景图片

1、找一款编辑软件,打开后新建一个按钮(这里用DW)

网页效果图如下:

2、选择一张给按钮添加的背景图片,然后从css里设置一下:如下图所示

实现的效果网页如下:

边框属性用: border:1px solid #颜色即可;