CSS CSS制作按钮的背景颜色两种不同的纯色而不是渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16644726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS making a button's background-color two different solid colors NOT gradient
提问by Paul
How could I make a background of a button two solid colors? Please see examples below.
如何使按钮的背景具有两种纯色？请参阅下面的示例。
The overall aim is for the button to transition from the two shades of blue to the two shades of grey upon hover.
总体目标是让按钮在悬停时从两种蓝色阴影过渡到两种灰色阴影。
Colors:
颜色：
blue: #4098D3 (light), #2B8DCF (dark)
蓝色：#4098D3（浅色），#2B8DCF（深色）
grey: #515758 (light), # 2B8DCF (dark)
灰色：#515758（浅色），#2B8DCF（深色）
HTML button syntax: <button class="submit"></submit>
HTML 按钮语法： <button class="submit"></submit>
CSS:
CSS：
button.submit {
[background CSS from this question] }
button.submit:hover {
[background CSS from this question with alternate colors]
cursor: pointer;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
Feel free to use this JSFiddleI have setup for this query: http://jsfiddle.net/DMc9N/
随意使用我为这个查询设置的这个JSFiddle：http: //jsfiddle.net/DMc9N/
Your help is hugely appreciated
非常感谢您的帮助
回答by vals
Chovanec has part of the answer, the problem is that you can not animate gradients.
Chovanec 有部分答案，问题是你不能动画渐变。
A compromise that can give you good results is to specify the color as usual, and then put over it a semitransparent white gradient.
可以为您带来良好效果的折衷方法是像往常一样指定颜色，然后在其上添加半透明的白色渐变。
button.submit {
background-color: #4098d3;
color: #fff;
background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 51%);
}
}
In the bottom half, the final color will be the one that you set. In the upper half, it will be lighter as it gets blended with the white of the gradient.
在下半部分，最终颜色将是您设置的颜色。在上半部分，当它与渐变的白色混合时会更亮。
That's enough to make it work, see the Demo
这足以使它工作，请参阅Demo
To make the upper half lighter or darker, you need to adjust the last 0.5 in the background-image.
要使上半部分更亮或更暗，您需要调整背景图像中的最后 0.5。
The only down side is that you don't have precise control over the light gray in the hover state, it will be whatever it happens to be. You can set also a background-image in the hover state, for instance
唯一的缺点是您无法精确控制悬停状态下的浅灰色，无论它碰巧是什么。例如，您还可以在悬停状态设置背景图像
button.submit:hover {
background-color: #515758;
background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.7) 51%);
...
But that will not be transitioned (however, the effect is good enough if the difference is not too high)
但这不会被过渡（不过，如果差异不是太大，效果就足够了）
By the way, this technique is also used when you want several elements to have the same 2-color look, but changing the base color. You set the color in one class, and the gradient in another.
顺便说一句，当您希望多个元素具有相同的 2 色外观但更改基色时，也可以使用此技术。您在一个类中设置颜色，在另一个类中设置渐变。
回答by Michal
Use this type of gradient set:
使用这种类型的渐变集：
background: #2989d8; /* Old browsers */
background: -moz-linear-gradient(top, #2989d8 50%, #207cca 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#2989d8), color-stop(51%,#207cca)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2989d8 50%,#207cca 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2989d8 50%,#207cca 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2989d8 50%,#207cca 51%); /* IE10+ */
background: linear-gradient(to bottom, #2989d8 50%,#207cca 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */
回答by 2ne
You can do this by setting 2 locations of the gradients to the same value. In your example it would be 2 50% values.
您可以通过将渐变的 2 个位置设置为相同值来实现此目的。在您的示例中，它将是 2 50% 的值。
Blue
蓝色
background: linear-gradient(to bottom, #4098d3 0%,#4098d3 50%,#2b8dcf 50%,#2b8dcf 100%);
Grey
灰色的
background: linear-gradient(to bottom, #515758 0%,#515758 50%,#2B8DCF 50%,#2B8DCF 100%);
Demo on jsfiddle http://jsfiddle.net/mm3Rz/
jsfiddle 上的演示http://jsfiddle.net/mm3Rz/
回答by Sakata Gintoki
The best choose for you: http://colorzilla.com/gradient-editor/Support all browser web. :)
最适合您的选择：http: //colorzilla.com/gradient-editor/支持所有浏览器网页。:)
If you want to perfect for display, i think you can slice image background. May be like this:
如果你想完美显示，我认为你可以切片图像背景。可能是这样的：
First: slice your background image with size: width = 1px; height = height of your image and save with PNG format for best size and quality.
首先：将你的背景图片切成大小：width = 1px; 高度 = 图像的高度并以 PNG 格式保存以获得最佳尺寸和质量。
Second: Css for your button
第二：你的按钮的CSS
button.submit {
background: url(your-background.png) repeat-x left center; }
button.submit:hover {
background: url(your-background-hover.png) repeat-x left center;
cursor: pointer;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
回答by seemly
Less HTML and slightly more semantic example than the one given in the link to another stackoverflow answer in the comments:
与评论中另一个 stackoverflow 答案的链接中给出的示例相比，HTML 更少，语义示例略多：
.fancyButton {
width:100px;
display:inline-block;
position:relative;
background-color:#2B8DCF;
}
.fancyButton span {
width:100%;
display:inline-block;
position:absolute;
}
.fancyButton .bg {
height:50%;
top:0;
background-color:#4098D3 ;
}
.fancyButton .text {
position:relative;
text-align:center;
color:#fff;
}
<a href="#" class="fancyButton">
<span class="bg"></span>
<span class="text">hi</span>
</a>
回答by Medda86
css3 you can try something like:
css3 你可以尝试类似的东西：
box-shadow: inset 0px 24px 0px rgba(255, 255, 255, 0.14);
to give the shadown on the inside of the box, pretty neat.
给盒子里面的阴影，很整洁。
