CSS如何设置按钮背景图片

html-css011

CSS如何设置按钮背景图片,第1张

CSS设置按钮背景图片

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

网页效果图如下:

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

实现的效果网页如下:

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

1、如果你用的是默认的 下拉框。这个箭头的样式 跟浏览器的版本有关。版本不同样式就不一样。

2、如果你要用自定义的图片的话,恐怕有些困难。

3、你还可以 使用“模拟下拉框的方式”。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot>

<html xmlns="http://www.w3.org/1999/xhtml&quot>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

</head>

<style>

#menu5 {

width: 200px

margin: 10px

}

#menu5 li a {

height: 32px

voice-family: "\"}\""

voice-family: inherit

height: 24px

text-decoration: none

}

#menu5 li a:link, #menu5 li a:visited {

color: #FFF

display: block

background:  url(menu5.gif)

padding: 8px 0 0 10px

}

#menu5 li a:hover {

color: #FFF

background:  url(menu5.gif) 0 -32px

padding: 8px 0 0 10px

}</style>

<body>

<div id="menu5">

<ul>

<li><a href="#1" title="Link 1">Link 1</a></li>

<li><a href="#2" title="Link 2">Link 2</a></li>

<li><a href="#3" title="Link 3">Link 3</a></li>

<li><a href="#4" title="Link 4">Link 4</a></li>

<li><a href="#5" title="Link 5">Link 5</a></li>

</ul>

</div>

</body> </html>

下面是背景图片。