HTML 按钮图像截断答案

【问题标题】：HTML Button Image Cut OffHTML 按钮图像截断
【发布时间】：2015-10-21 03:02:44
【问题描述】：

我正在尝试使用图像和基本 CSS 样式在 HTML 中制作一个简单的按钮。当我在浏览器中加载 html 文件时，它会显示按钮的文本以及一些按钮图像，但是文本之外的任何内容都会被截断。

我希望按钮完全显示（它非常大），根本没有文字。

这是我的 HTML 代码：

<link rel="stylesheet" type="text/css" href="style.css">
<a href="somepage.html" class="likeAButton">Fake Button</a>

这是我的 css 文件：

a.likeAButton {
     width: 500px;
     height: 600px;
     background-image: url(./images/buttons/4s_inactive.png);
     font-size: 14px;
     font-family: Tahoma, Geneva, sans-serif;
     font-weight: bold;
     text-align: center;
}
a.likeAButton:hover {
    width: 500px;
    height: 600px;
    background-image: url(./images/buttons/4s_active.png);
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
}
a.likeAButton:active {
    width: 500px;
    height: 600px; 
    background-image: url(./images/buttons/4s_active.png);
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
}

任何帮助将不胜感激。

【问题讨论】：

那么，您只希望“按钮”具有背景图像的宽度吗？

标签： html css button

【解决方案1】：

锚点默认是内联的，所以它们没有大小。试试这个：

a.likeAButton {
    display: inline-block;
    ... 
}

a.likeAButton {
  display: inline-block;
  width: 500px;
  height: 600px;
  background-image: url(http://placehold.it/500x600);
  font-size: 14px;
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  text-align: center;
}
a.likeAButton:hover {
  background-image: url(http://placehold.it/500x600/0000ff);
}
a.likeAButton:active {
  background-image: url(http://placehold.it/500x600/ff0000);
}

&lt;a href="somepage.html" class="likeAButton"&gt;&lt;/a&gt;

Fiddle demo

请注意，我从您的 :hover 和 :active 伪类中删除了大部分样式声明。没有必要重复它们。

【讨论】：