1

これは既に SO であることがわかりましたが、誰もがそれがうまく機能していると考えているようです。同じ要素で背景画像と 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-imageプロパティとして持っていますが、あなたはそれのすべての背景値を置きます、ただ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 に答える