Html 创建一个下半部分颜色和上半部分另一种颜色的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7842393/
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
Create a div with bottom half one color and top half another color
提问by GobiasKoffi
I have a which I am going to make into a button. The top half should be #ffd41a and the bottom half should be #fac915. Here is a link to the button at present. http://jsfiddle.net/WnwNW/
我有一个我要做成一个按钮。上半部分应该是#ffd41a，下半部分应该是#fac915。这是当前按钮的链接。http://jsfiddle.net/WnwNW/
The problem that I'm facing is how should I deal with two background colors. Is there a way to do what I'm trying to do without the need for addition divs or spans? Can I have two background attributes within the same CSS class?
我面临的问题是我应该如何处理两种背景颜色。有没有办法在不需要添加 div 或 span 的情况下做我想做的事情？我可以在同一个 CSS 类中拥有两个背景属性吗？
回答by Naren
CSS3 provides a way to do this
CSS3 提供了一种方法来做到这一点
background-image: linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -o-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -moz-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -webkit-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -ms-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
回答by hraesvelgr
Yes and no. You can use two background attributes. However, this is only supported in CSS3. That means that two background images will break in older browsers. That being said, you can do something like this.
是和否。您可以使用两个背景属性。但是，这仅在 CSS3 中受支持。这意味着两个背景图像将在旧浏览器中中断。话虽如此，你可以做这样的事情。
background-image: url(color1.png), url(color2.png);
background-position: bottom, top;
background-repeat: no-repeat;
I'm not sure if you can specify multiple background "colors."
我不确定您是否可以指定多个背景“颜色”。
