css 以图像为背景的按钮

Question

CSS

#printbutton{
    width: 156px;
    height: 63px;
    background-image: url(../images/Untitled_1.png);
    background-repeat: no-repeat;
}

HTML

<button onclick="printpage()" class="dontprint" id="printbutton"></button>

这是我的 html 和 css 按钮图像我的问题是如何摆脱图像之外的背景我指的是图像本身后面的矩形我的图像没有那个背景，因为它看起来像 this

Answer 1

将背景设为透明。

button{
  margin      : 0;
  padding     : 0;
  border      : 0;
  background  : transparent;
  font-family : inherit;
  font-size   : 1em;
  cursor      : pointer;
}

http://code.stephenmorley.org/html-and-css/styling-buttons-with-css3/

Answer 2

像图片一样调整按钮形状添加按钮高度和宽度以及边框半径

button {
border-radius: 46px;
    width: 156px;
    height: 63px;
}

css 以图像为背景的按钮

css button with image as background

html

css

background

image

background-image