2

我正在使用 CSS 在元素上放置渐变和背景图像。我从去 Colorzilla 开始渐变,它给了我这个。

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!

4

1 回答 1

1

您将需要创建另一个元素,在 =<IE9 中不可能使用多个背景

于 2013-02-09T20:15:14.830 回答