تغيير ألفا للحصول على صورة تحوم في معيار CSS2؟

Question

أحاول إضافة تأثير ألفا لصورتي. الصورة في شكل مستطيل زاوية مستديرة. أعرف أن هناك سمات لتغيير ألفا في CSS3، لكنني أحاول أن أكون متوافقا مع معيار W3C، وهو ما لا يزال CSS2.

آسف لم أذكر سؤالي ealier بشكل صحيح. كنت أحاول تغيير ألفا عندما أحكم على الصورة باستخدام CSS2. أفكر في استخدام "صورة الخلفية" ل 100٪ ألفا، واستخدم علامة img ل 50٪ ألفا. هل هناك أي طريقة أفضل للقيام بذلك؟

Answer 1

إذا كانت الصورة بي إن جي, ، يمكنك تضمين ألفا مباشرة في الصورة. بالطبع هذا سوف يتطلب إصلاح PNG البرنامج النصي ل IE6.

خلاف ذلك، يمكنك استخدام CSS لتعيين الشفافية.

تحرير: تحديث لا يعمل فقط على التحوم، لاحظ أن هذا لن يعمل في IE6.

img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}

Answer 2

الطريقة النموذجية تنفذ مطور الويب ينفذ التأثيرات الشفافة ملف PNG شفافة جزئيا كخلفية.

div {
  background: #FFF url(img/bg.png) repeat top left;
}

ستعمل استخدام PNG كما تتوقع، لكن العتامة لا تعمل كما هو متوقع:

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

سيؤدي ذلك إلى جعل DIV 50٪ شفافة، بما في ذلك جميع أطفالها ونصها وكلها. ستحتاج حقا إلى اللعب حول إعدادات التعتيم للتأكد من الحصول على نتائج كما تتوقع.

Answer 3

إصلاح أكثر بساطة، إذا كنت تستطيع الوقوف تجربة مستخدم أسوأ قليلا ل IE6، هو استخدام صورة شفافة ألفا لجميع المتصفحات الحديثة، وإرسال صورة بدون شفافية (أو لون واحد فقط) إلى IE6. يبدو أسوأ قليلا بالنسبة لأولئك القليل من المستخدمين، ولكن أقل بكثير من التعليمات البرمجية للحفاظ عليها.