Question

我正在尝试将一些jquery client side validation用于我的asp.net 2.0 webform。并且似乎正常的输入提交按钮可以轻松触发点击验证。

但我目前正在为此页面使用三个div组成的图像按钮，因此它不会自动触发验证。

我正在看css3并发现它现在支持渐变，除了我需要在按钮右侧显示箭头图像这一切都很好和好。

我已经使用正常的背景图像和背景颜色进行测试，以设置按钮并且它可以正常工作。但我似乎无法为渐变背景和背景图像工作。

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid Sans">
<style>
.button{
    -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.25, rgb(88,73,229)),
    color-stop(0.63, rgb(115,103,255)),
    color-stop(0.82, rgb(150,134,255))
);
-moz-linear-gradient(
    center bottom,
    rgb(88,73,229) 25%,
    rgb(115,103,255) 63%,
    rgb(150,134,255) 82%
);

    color:#FCD3A5;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 10px;
    font: 12px;
    width:140px;
    line-height: 28px;
    height: 28px;
    font-weight: bold;
    font-family:"Droid Sans",serif;
}

.orange{
    background:-moz-linear-gradient(center top , #FF9300, #FF6800) repeat scroll 0 0 transparent;
    border:1px solid #CFCFCF;
    color:#FFFFFF;
    font: 12px;
    width:140px;
    line-height: 28px;
    height: 28px;
    font-family:"Droid Sans",serif;
    background-image:url(arrow_right.png);
    background-repeat: no-repeat; 
    background-position:right;

}

.button2{
    background-color:#2daebf;
    background-image:url(arrow_right.png);
    font: 12px;
    width:140px;
    line-height: 28px;
    height: 28px;
    font-weight: bold;
    color: white;
    font-family:"Droid Sans",serif;
    background-repeat: no-repeat; 
    background-position:120px;
    border: 0px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 10px; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.button3{
    background: green; /* fallback for older/unsupporting browsers */  
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(88,73,229)),
        color-stop(0.63, rgb(115,103,255)),
        color-stop(0.82, rgb(150,134,255))
    );
    background:-moz-linear-gradient(
        center bottom,
        rgb(88,73,229) 25%,
        rgb(115,103,255) 63%,
        rgb(150,134,255) 82%
    );
    border-top: 1px solid white;  
    background-image:url(arrow_right.png);
    background-repeat: no-repeat; 
    background-position:120px;

}

</style>
</head>
<input class="button3" type="submit" value="SUBMIT"/ >
</html>

任何想法？

Answer 1

Google的Gmail / Docs / etc用户界面按钮使用一些CSS技巧完成此操作。你可以在这里看到别人的实现：

http://todc.github.com/css3-google-buttons/#button

基本上按钮是实际的href锚点<a>，并且应用了渐变。然后有一个单独的样式，使用::before伪造选择器将背景设置为图像。重新实施有点棘手，但显然有可能。

Answer 2

无法完成：see this article

Mozilla目前仅支持CSS渐变作为background-image属性的值，以及简写背景中的值。 您指定的是渐变值而不是图片网址。

我确信webkit（safari / chrome）可能是一样的。 IE不支持渐变。

我的建议是将提交按钮包装在div元素中。将渐变应用于提交按钮，将背景图像应用于div并添加一个小填充，以便在需要时将其正确放置。或者，使用<label>元素作为提交按钮，并将背景图像应用于标签。

如何创建具有渐变背景和背景图像的按钮？

2 个答案: