与背景梯度的背景图象

时间:2014-03-19 07:53:31

标签: css html5 css3 background background-image

我正在尝试将一个徽标添加到一个用渐变样式设置的按钮,但背景图像“删除”背景颜色......

这是小提琴:http://jsfiddle.net/FDXy5/,下面是当前的tet .css。

.rounded-orange-button {
text-align: center;
color: #FFFFFF;
display: inline-block;
border-radius: 2px;
line-height: 27px;
width: 200px;
position: relative;
background: #FF9100;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF9100) to(#FA6800));
background: -webkit-linear-gradient(top, #FF9100, #FA6800);
background: -moz-linear-gradient(top, #FF9100, #FA6800);
background: -o-linear-gradient(top, #FF9100, #FA6800);
background: linear-gradient(to bottom, #FF9100, #FA6800);
-pie-background: linear-gradient(to bottom, #FF9100, #FA6800);
}

.logo-edit{
    background-image: url('http://www.w3schools.com/cssref/smiley.gif');
    background-repeat:no-repeat;
}

感谢帮助我: - )

1 个答案:

答案 0 :(得分:6)

实际上也是背景图像。幸运的是,在现代浏览器中,您可以拥有多个背景图像。

示例:

background-image: url('http://www.w3schools.com/cssref/smiley.gif'), linear-gradient(to bottom, #FF9100, #FA6800);

您还需要为供应商特定的渐变做同样的事情。

<强> jsFiddle

请参阅此链接以获取兼容性表:background-image MDN