html - 响应按钮似乎是 :hover 上的两个按钮

Question

我试图让表单响应。

这样做时，如果我现在将鼠标悬停在提交按钮上，似乎会出现两个按钮？

Example fiddle

示例图片:

代码:

.loudbutton:hover { cursor:pointer;
width: 90%;
height: 40%;
background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light-2.jpg');
}

Answer 1

问题是当图片不够大无法填满整个元素时它会重复图片。

添加 background-size: 100% 100% 让它填充按钮而不重复:

.loudbutton:hover { cursor:pointer;
    width: 90%;
    height: 40%;
    background-image: url('http://www.workbooks.com/sites/default/files/image/submit-button-2015-light-2.jpg');
    background-size: 100% 100%;
}

也就是说，正如 Denis 所指出的，这种图像可以使用 CSS 轻松完成，因此您根本不需要图像文件。 Updated Fiddle without the image .