IE9背景大小的漸變

有沒有辦法使用background-size爲IE9爲gradients？因爲在我的情況下，添加background-size到CSS沒有任何影響。IE9背景大小的漸變

[增訂]

樣品的編號：

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#ddd')"; 
background-size: 2px 100%;

在這種情況下，背景尺寸不起作用。

來源

2012-10-04 Alex Ivasyuv

http://stackoverflow.com/a/12643956/1577396檢查此鏈接 –

您正在使用CSS的漸變或背景圖片？ – Dipak

IE-9支持背景大小http://caniuse.com/#search=background-size –

background-size不IE9的梯度工作。僅限圖像。這就是爲什麼一個解決方案使用SVG。

我發現在一些網站的一個解決方案，以及點點改變它支持RGBA（SASS）即使IE9工作正常（除了WebKit的）：

@mixin svg-linear-gradient($angle, $color1, $color1Alpha, $offset1, $color2, $color2Alpha, $offset2:100, $color3:null, $color3Alpha: 1, $offset3:100, $color4:null, $color4Alpha: 1, $offset4:100, $color5:null, $color5Alpha:1, $offset5:100){ 
    $angle_webkit:'left top, left bottom'; 
    $angle_svg:'%20x2%3d%220%25%22%20y2%3d%22100%25%22'; 
    $color-stop1_svg:'%3cstop%20style%3d%22stop%2dcolor%3argba('#{red($color1)}'%2C'#{green($color1)}'%2C'#{blue($color1)}'%2C'#{$color1Alpha}')%22%20offset%3d%22'#{$offset1}'%25%22%2f%3e'; 
    $color-stop2_svg:'%3cstop%20style%3d%22stop%2dcolor%3argba('#{red($color2)}'%2C'#{green($color2)}'%2C'#{blue($color2)}'%2C'#{$color2Alpha}')%22%20offset%3d%22'#{$offset2}'%25%22%2f%3e'; 
    $color-stop3_svg:''; 
    $color-stop4_svg:''; 
    $color-stop5_svg:''; 
    @if $angle == right{ 
     $angle_svg:'%20x2%3d%22100%25%22'; 
    } 
    @if $angle == bottom{ 
     $angle_svg:'%20x2%3d%220%22%20y1%3d%22100%25%22'; 
    } 
    @if $angle == left{ 
     $angle_svg:''; 
    } 
    @if $color3 != null { 
     $color-stop3_svg:'%3cstop%20style%3d%22stop%2dcolor%3argba('#{red($color3)}'%2C'#{green($color3)}'%2C'#{blue($color3)}'%2C'#{$color3Alpha}')%22%20offset%3d%22'#{$offset3}'%25%22%2f%3e'; 
    } 
    @if $color4 != null { 
     $color-stop4_svg:'%3cstop%20style%3d%22stop%2dcolor%3argba('#{red($color4)}'%2C'#{green($color4)}'%2C'#{blue($color4)}'%2C'#{$color4Alpha}')%22%20offset%3d%22'#{$offset4}'%25%22%2f%3e'; 
    } 
    @if $color5 != null { 
     $color-stop5_svg:'%3cstop%20style%3d%22stop%2dcolor%3argba('#{red($color5)}'%2C'#{green($color5)}'%2C'#{blue($color5)}'%2C'#{$color5Alpha}')%22%20offset%3d%22'#{$offset5}'%25%22%2f%3e'; 
    } 

    background: url('data:image/svg+xml,%3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20width%3d%22100%25%22%20height%3d%22100%25%22%3e%3cdefs%3e%3clinearGradient%20id%3d%22G%22#{$angle_svg}%3e#{$color-stop1_svg}#{$color-stop2_svg}#{$color-stop3_svg}#{$color-stop4_svg}#{$color-stop5_svg}%3c%2flinearGradient%3e%3c%2fdefs%3e%3crect%20width%3d%22100%25%22%20height%3d%22100%25%22%20fill%3d%22url%28%23G%29%22%2f%3e%3c%2fsvg%3e'); 
}

以及如何使用它：

@include svg-linear-gradient(top, $first, $firstAlpha, 0, $second, $secondAlpha, 100);

來源

2012-10-09 15:08:55

-1

不知道你想要什麼，但下面的鏈接將幫助您（大小和IE中的任何版本的梯度都工作得不錯）

http://css3pie.com/

來源

2012-10-04 07:22:14

IE9背景大小的漸變

回答

相關問題