如何让提交按钮以正确的颜色正确显示，而不是一半为黑色？答案

【问题标题】：How do I get the submit button to display properly with correct color instead of half being black?如何让提交按钮以正确的颜色正确显示，而不是一半为黑色？
【发布时间】：2014-10-22 20:36:04
【问题描述】：

有问题的页面位于http://blue123a.businesscatalyst.com/select。主题被称为Forceful。

我创建了一个新站点并创建了一个新表单。当我将表单添加到页面中时，提交按钮出现问题。我发现可能相关的唯一一件事是在 z 轴上向上移动按钮（我相信），但我也不知道该怎么做。

按钮工作正常，但显示不正确。

谢谢。

2014 年 10 月 23 日更新 Steve88 部分回答了我最初的问题。 css 更改确实使一种颜色从左到右显示，在提交按钮上显示白色而不是浅绿色；它也摆脱了按钮的黑色一半。它在按钮的一部分上给了我一个透明的灰色框，并使按钮变成方形。

我做了更多的挖掘，并在 www.htmlgoodies.com/beyond/css/article.php/3891201 和 www.w3schools.com/css/css3_borders.asp 找到了答案，这帮助我找回了圆角。

为边框半径添加 CSS 代码给了我想要的角。包括 -moz-border-radius 和 -webkit-border-radius 以实现额外的跨浏览器兼容性。

我也让按钮悬停正常工作。

...原始 CSS...

FOR BUTTON（代码较多，但这是必不可少的部分。）

.webform .cat_button {
background: url("../images/buttons/submit_button.png") no-repeat scroll 100% 0 rgba
(0, 0, 0, 0);
border: 0 none;

按钮悬停

.webform .cat_button:hover {
background: url(../images/buttons/submit_button.png) no-repeat 100% -39px; }

....带调整的 CSS...

按钮

.webform .cat_button {
background: url("../images/buttons/submit_button.png") no-repeat scroll 0 0     
transparent;
border: 0 none;
border-radius: 8px;
-moz-border-radius: 8px; 
-webkit-border-radius: 8px;

按钮悬停

.webform .cat_button:hover {
background: url(../images/buttons/submit_button.png) 0 -39px; }

【问题讨论】：

标签： adobe submit-button business-catalyst

【解决方案1】：

把你的背景样式改成这样：

背景：url("../images/buttons/submit_button.png") 重复 50% 0 rgba(0, 0, 0, 0);

它在 style.css 的第 1614 行

【讨论】：

谢谢。我测试了您的建议“背景：url（“../images/buttons/submit_button.png”）重复50％0 rgba（0、0、0、0）；“。使按钮呈方形和白色。现在有一个透明的灰色框，从按钮的顶部几乎一直延伸到底部。
我不确定我确切地知道你想要达到什么目标？