الألوان المتدرجة في Internet Explorer

StackOverflow https://stackoverflow.com/questions/213750

سؤال

أعلم أن Internet Explorer يحتوي على بعض الامتدادات الخاصة بحيث يمكنك القيام بأشياء مثل إنشاء أقسام div بخلفية متدرجة.لا أستطيع تذكر اسم العنصر أو استخدامه.هل لدى أي شخص بعض الأمثلة أو الروابط؟

هل كانت مفيدة؟

المحلول

ونظرة على CSS مخصص المرشحات يمكن التعامل مع IE http://msdn.microsoft.com/en-us/library/ms532847.aspx

نصائح أخرى

الكود الذي أستخدمه لجميع تدرجات المتصفح:

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

سوف تحتاج إلى تحديد ارتفاع أو zoom: 1 للتقديم hasLayout إلى العنصر لهذا العمل في IE.

تحديث:

إليك إصدار LESS Mixin (CSS) لجميع مستخدمي LESS الموجودين هناك:

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

ونمط filter يجب أن تعمل لIE8 و IE9. 

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}

وهناك مسكتك كبير عندما يتعلق الأمر التدرجات في IE هو أنه على الرغم من يمكنك استخدام الفلاتر مايكروسوفت ... 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;

و... انهم على قتل نوع واضح في أي نص من التدرج تغطيتها. وبالنظر إلى أن الغرض من التدرجات عادة لجعل واجهة المستخدم تبدو أفضل، وهذا هو المعرض سدادة بالنسبة لي.

وهكذا على سبيل IE يمكنني استخدام صورة خلفية تكرار بدلا من ذلك. إذا تم الجمع بين المغلق صورة خلفية مع CSS التدرج لمتصفحات أخرى (كما في الجواب Blowsie)، وسوف المتصفحات الأخرى تجاهل صورة خلفية لصالح المغلق التدرج، لذلك سوف تنتهي إلا تطبيق لIE. 

background-image: url('/Content/Images/button-gradient.png');

وهناك الكثير من المواقع التي يمكن استخدامها لتوليد بسرعة خلفية متدرجة. يمكنني استخدام هذا .

أداة رائعة من مايكروسوفت، ويسمح لك لفحص الألوان في الوقت الحقيقي ويولد CSS لجميع المتصفحات: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html 

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

وبس كنت أضيف هذا الرابط المفيد: http://css3please.com/

ويبين كيفية الحصول على تدرجات العمل في جميع المتصفحات.

ملحوظة أن IE10 سيدعم التدرجات كما يلي: 

background: -ms-linear-gradient(#017ac1, #00bcdf);

والحق من ScriptFX.com المقالة : 

<body bgcolor="#000000" topmargin="0" leftmargin="0">

    <div style="width:100%;height:100%; filter: progid:
        DXImageTransform.Microsoft.Gradient (GradientType=1,
        StartColorStr='#FF006600', EndColorStr='#ff456789')">

Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below

    </div>
</body>

وجرب هذا: 

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}

شيئان اكتشفتهما أثناء معاناتي مع التدرج IE 9.

  1. ال -ms-filter لا يعمل بالنسبة لي.كان علي أن أستخدم ببساطة filter.
  2. كان علي أن أضيف height: 100% إلى صفي لـ IE لاستخدام التدرج.
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top