我有一个按钮,上面有一个渐变.我还需要一个图像箭头,但是当我将它放到背景中时,一个带有两个类的按钮似乎无法工作.以下是一个例子:
.btn{ background: rgb(0,166,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,166,255,1) 0%, rgba(0,166,255,1) 50%, rgba(2,154,236,1) 53%, rgba(2,154,236,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,166,255,1)), color-stop(50%,rgba(0,166,255,1)), color-stop(53%,rgba(2,154,236,1)), color-stop(100%,rgba(2,154,236,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a6ff', endColorstr='#029aec',GradientType=0 ); /* IE6-9 */ border:0px; color:white; font-family: HelveticaNarrow; font-weight: bold; font-size: 12pt; text-transform: uppercase; cursor: pointer; } .btn-wide{ width:728px; height:45px; background-image: url('images/white-arrow-down.png') no-repeat; background-position: 50% 50%; }
由于.btn类,我猜测类.btn-wide的背景会被忽略.在这个例子中,什么是最好的标记解决方案?:)
的jsfiddle