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，使其位于您想要的位置。

使按钮大小为背景图像

1 个答案: