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, если это поможет!