2013-02-09 62 views
2

我正在使用CSS在元素上放置漸變和背景圖像。我開始去Colorzilla的漸變,它給了我這個。如何在Internet Explorer中加入背景圖像和漸變

background: rgb(250,250,250); 
background: -moz-linear-gradient(left, rgba(250,250,250,1) 0%, rgba(236,236,236,1) 100%); 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(250,250,250,1)), color-stop(100%,rgba(236,236,236,1))); 
background: -webkit-linear-gradient(left, rgba(250,250,250,1) 0%,rgba(236,236,236,1) 100%); 
background: -o-linear-gradient(left, rgba(250,250,250,1) 0%,rgba(236,236,236,1) 100%); 
background: -ms-linear-gradient(left, rgba(250,250,250,1) 0%,rgba(236,236,236,1) 100%); 
background: linear-gradient(to right, rgba(250,250,250,1) 0%,rgba(236,236,236,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ececec',GradientType=1); 

這適用於所有主要的瀏覽器,包括Internet Explorer(至少在IE9中)。

然後我手動添加背景圖像。

background: url('/public/src/images/features_arrow_fade.png') no-repeat 260px center, rgb(250,250,250); 
background: url('/public/src/images/features_arrow_fade.png') no-repeat 260px center, -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(236,236,236,1) 100%); 
background: url('/public/src/images/features_arrow_fade.png') no-repeat 260px center, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,250,1)), color-stop(100%,rgba(236,236,236,1))); 
background: url('/public/src/images/features_arrow_fade.png') no-repeat 260px center, -webkit-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(236,236,236,1) 100%); 
background: url('/public/src/images/features_arrow_fade.png') no-repeat 260px center, -o-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(236,236,236,1) 100%); 
background: url('/public/src/images/features_arrow_fade.png') no-repeat 260px center, -ms-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(236,236,236,1) 100%); 
background: url('/public/src/images/features_arrow_fade.png') no-repeat 260px center, linear-gradient(to bottom, rgba(250,250,250,1) 0%,rgba(236,236,236,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ececec',GradientType=0); 

這正確地顯示除IE以外的所有主流瀏覽器中的圖像漸變。 IE只顯示漸變。我怎樣才能讓它在IE中工作呢?我願意使用jQuery,如果它會幫助!

回答

1

您將需要創建另一個元素,它不可能在= < IE9中使用多個背景