以图像为背景的{c}按钮

时间:2015-07-18 08:32:12

标签: html css image background background-image

iamge

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

2 个答案:

答案 0 :(得分:2)

将背景用作透明。

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/

答案 1 :(得分:2)

将按钮整形为好像是图像添加按钮的高度和宽度以及边框半径

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