1

现在我发现这个已经如此了，每个人似乎都认为它很好用如何在同一个元素上结合背景图像和 CSS3 渐变？

由于某种原因，当我这样做时，它失败了。图像单独工作，渐变也是如此。我究竟做错了什么？

.cSub {
  background: #00f;
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -moz-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -webkit-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -o-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -ms-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, linear-gradient(135deg, #0088b7 0%, #006da4 100%);
  border-top: 2px solid #0089b7;
}
4

2 回答 2

2

您拥有background-imageas 属性，但您为其放置了所有背景值，只是放置background而不是background-image.

于 2013-03-08T05:25:19.773 回答
0 
.cSub {    
  background: #00f;    
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -moz-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);    
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -webkit-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);    
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -o-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);   
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -ms-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);    
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, linear-gradient(135deg, #0088b7 0%, #006da4 100%);   
  border-top: 2px solid #0089b7;    
width:200px;    
height:auto    
}

您需要提及宽度和高度才能显示背景。

于 2013-03-08T07:08:29.137 回答