Кросбраузерності прозорість на css

Прозорість досить часто використовується при створенні анімаційних ефектів. Наприклад, найпростіший приклад - плавна зміна зображень через зміну прозорості. Однак, дуже часто використовують властивість opacity, яке, до речі, з CSS3, тому в старих браузерах не працює. В принципі, зараз це не критично, але ті, хто хоче адаптувати свій сайт і під старі браузери (наприклад, замовник попросив), то прочитайте в цій статті, як зробити кросбраузерності прозорість на CSS.

Для початку HTML-код:

Відео: Прозорий фон блоку div з непрозорим текстом

src="Images / photo.jpg"alt="Світлина"/ Gt;

Думаю, що тут особливо пояснювати нічого - просто вставили зображення. тепер CSS-код, який зробить це зображення наполовину прозорим:

Відео: 33 урок. HTML & CSS. Прозорість. Закруглення кутів. Градієнт. фільтри

img { 
 filter: alpha(Opacity=50) - 
 opacity:0.5- 
}

Даний код буде працювати і в старих браузерах, і в нових. Я думаю зрозуміло, що filter - це для старих версій IE. А opacity для всіх сучасних браузерів.

Відео: Як зробити спрей з прозорим фоном для css

І для закріплення матеріалу давайте з Вами зробимо таку задачу: при наведенні курсору миші на зображення воно повинно стати повністю непрозорим, а при відведенні курсору знову ставати наполовину прозорим. Загалом, досить класична задача. Безумовно, цей скрипт повинен бути кросбраузерності. Отже, для початку HTML-код: