html - 将按钮设置为背景图像的大小

Question

我有一个带有背景图片的提交按钮的表单，

<button type="button" class="button" alt="Send" onclick="validate_form_newsletter_wide( form )"></button>

只要我指定要在 CSS 中使用的尺寸就可以了。

.button {
  position: relative;
  background: url("index_htm_files/btn_newsletter_wide.png") no-repeat;
  border:none;
  cursor: pointer;
  float: right;
  height: 51px;
  width: 200px;
  margin: 0px;
  padding:0px;
  z-index: 999;
}

如果我删除高度和宽度 CSS，按钮不会显示，如果我将它们分别设置为 100%，那么我会在表单下方看到按钮的滑行。

我怎样才能更改 CSS 或代码，这样我就不需要指定图像的大小，因为图像的大小会不时发生一点点变化。

Answer 1

您不能使元素缩放以适合其背景图像。

也就是说，您的按钮上根本没有任何内容，所以听起来您的背景图片实际上是内容图片，根本不应该出现在 CSS 中。

改用内容图片。

<button type="button" 
        class="button" 
        onclick="validate_form_newsletter_wide( form )"><img
            src="index_htm_files/btn_newsletter_wide.png" 
            alt="Send"></button>

您可能想要使用 CSS 删除按钮的默认填充和边框，并调整图像的 vertical-align 使其位于您想要的行上。