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를 기꺼이 사용할 것입니다!