对background-size
IE9
使用gradients
是否有办法?因为在我的情况下,将background-size
添加到CSS
没有任何效果。
[增订]
示例代码:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#ddd')";
background-size: 2px 100%;
在这种情况下,背景大小不起作用。
答案 0 :(得分:0)
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);
答案 1 :(得分:-1)
不确定你想要什么,但链接下方会帮助你(大小和渐变在任何版本的IE中都可以正常工作)