CSS中实现按钮是图片居中显示图片,需要设置按钮的大小、背景图位置和居中方式。.btn { width: 100px; /* 按钮宽度 */ height: 40px; /* 按钮高度 */ back
CSS中实现按钮是图片居中显示图片,需要设置按钮的大小、背景图位置和居中方式。
.btn { width: 100px; /* 按钮宽度 */ height: 40px; /* 按钮高度 */ background-image: url("button.png"); /* 背景图 */ background-position: center center; /* 图片居中 */ text-align: center; /* 文本居中 */ line-height: 40px; /* 文本居中 */ border: none; /* 去除边框 */ color: #fff; /* 文字颜色 */ font-size: 16px; /* 文字大小 */ cursor: pointer; /* 鼠标样式 */ }
以上代码中,需要注意的是:按钮的宽度和高度需要根据实际情况设置。背景图的位置设置为居中即可实现图片居中显示。文本也需要居中显示,这里使用了text-align和line-height属性。为了美观,去除了按钮的边框并设置了文字颜色、大小和鼠标样式。
粉丝
0
关注
0
收藏
0