表格提交按钮上的渐变和图像？

Question

我想知道是否有办法在保留渐变的同时在提交按钮上显示图像。

继承我所使用的渐变并使用。

但我想添加一张图片，如下图所示。但是通过添加图像，它会覆盖渐变。

下面是我用来添加按钮的代码。

background-position:  center left;
background-image: url(../images/icons/cross.png);
background-repeat: no-repeat;

下面是我想要的照片版本，因为你可以看到渐变和图像都存在。

有什么想法吗？显然你不能通过html将图像添加到提交按钮？或者你呢？

更新

下面是代码的片段

Gradient CSS

.whitegrad
{
background:#fefefe;
background: -moz-linear-gradient(top,  #fefefe 0%, #e3e3e3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#fefefe), color-stop(100%,#e3e3e3));
   /* etc etc */
}

表单的HTML

<form action='' method='post' class='addtofavorites' >
    <input type='hidden' class='atf_video_id' name='atf_video_id' value='' />
    <input class='whitebtn whitegrad rndrgt' type='submit' value='Add to Favorites' />

</form>

Answer 1

当你有可用的实际文字版本时，为什么要使用十字架的图像？

您可以在按钮文字中包含“+”：

<button type="submit">+ Add to Favourites</button>

或者使用CSS生成的内容添加它：

<button type="submit">Add to Favourites</button>

button:before {
    content: '+ ';
}

JS Fiddle demo

Answer 2

<button>标记可让您将HTML放入其中。您可以添加onclick + onkeypress个事件处理程序，以便在表单上调用submit()。然后，您可以在<button>上保留背景渐变。

你也可以在CSS3中使用多个背景，但它还没有得到很好的支持。

Answer 3

HTML

虽然<input type="submit">元素可以包含任意HTML，但您无法通过HTML将图像添加到<button>。 This article值得一看，虽然我认为让<button>在不同浏览器中可靠地提交表单存在一些问题。

CSS

要使用CSS执行此操作，您需要使用multiple background images。浏览器对它们的支持是：

• Chrome 1 +
• Firefox 3.6 +
• IE 9 +
• Opera 10.5 +
• Safari 2 +

将它与CSS渐变结合起来有点棘手，因为Firefox，Opera和Chrome / Safari都有自己的渐变语法，但这是Firefox的一个例子：

background-image: url(http://yubelr.com/images/icons/cross.png), -moz-linear-gradient(top, #fdd, #966);
background-repeat: no-repeat;
background-position: 3px 50%, 0 0;
padding-left: 10px;

• http://jsfiddle.net/CjDZr/1/

对于每种不同的浏览器渐变语法，您需要另一个background-image语句。

CSS3很有趣！

Answer 4

按钮元素允许您在内部添加HTML，如John Kurlak和Paul D. Waite所述。因此，在您的情况下，它与IE8兼容：您可以在按钮和HTML图像或带有附加span的背景图像上使用渐变。

HTML图片： http://jsfiddle.net/fm2s5/1/

背景图片和范围： http://jsfiddle.net/VYwhD/

使用表单元素修复的第一件事是font-size和font-family，然后是line-height，然后使用padding进行播放以获得所需的高度（尽管不修复高度，文本可以在缩放时展开，如果用户希望如此，这是不必要的。填充就足够了 垂直对齐有点棘手，有没有HTML图像会有所不同，但如果你选择这两种方法中的一种，就不会有差异。

我使用http://fvsch.com/code/button-css/进行按钮重置，使用http://www.colorzilla.com/gradient-editor/#fefefe+0,e3e3e3+100;Custom进行渐变，包括IE。