创建一个div，下半部分颜色和上半部分另一种颜色 [英] Create a div with bottom half one color and top half another color

问题描述

我有一个我要做一个按钮。上半部分应该是＃ffd41a，下半部分应该是＃fac915。这里是一个链接到目前的按钮。 http://jsfiddle.net/WnwNW/

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/

我的问题面对是我应该如何处理两种背景颜色。有没有办法做我想做的，而不需要添加div或跨度？我可以在同一个CSS类中有两个背景属性？

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?

推荐答案

CSS3提供了一种方法

CSS3 provides a way to do this

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%);

http： //jsfiddle.net/WnwNW/1/

这篇关于创建一个div，下半部分颜色和上半部分另一种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！