Если вас давно волновал вопрос как достигнуть прозрачности картинки или любого другого изображения средствами CSS, то в этой статье вы получите ответ. Очень полезно знать, как без использования отдельных полу-прозрачных png картинок, а только при помощи средств CSS, получить эффект полу-прозрачности для картинки ссылки. Особенно это применимо для всяческих дополнительно устанавливаемых на страницу кнопок, счетчиков посещаемости от различных сервисов. Они очень яркие и при этом часто не вписываются в дизайн страницы.

Советую заказывать дизайн сайта у специалистов в области графики и веба.

Для достижения эффекта прозрачности картинки применяется набор правил:

 #popular img {
-moz-opacity: 0.50; /* - для старого Netscape Navigator; -*/
-khtml-opacity: 0.5; /* - для прошлых версий Safari -*/
opacity: 0.5; /* - это правило пишется для Safari, Opera и многих версий Firefox;-*/
filter: alpha(opacity=50); /* - данная строка пишется для IE -*/
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

#popular img:hover {
-moz-opacity: 1.00; /* - все те же правила, что и в первой строке -*/
-khtml-opacity: 1.00; /* - все те же правила, что и во второй -*/
opacity: 1; /* - все те же правила, что и в третьей строке -*/
filter: alpha(opacity=100); /* - те же правила, что и в четвертой строке -*/
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}

В каждом наборе содержится не по одному правилу, так как это необходимо для корректного отображения в разных браузерах. Друг на друга правила ни как не влияют, поэтому разумно использовать каждое из них. Значение 100 или 1 — полная непрозрачность, 50 или 0,5 — средняя, аналогично другие значения, которые можно подобрать для каждого дизайна отдельно. Думаю теперь вы получили исчерпывающий ответ на столь трудный вопрос — как достигнуть прозрачности картинки средствами CSS. Если у вас есть, что добавить к стать, или какие то мысли по поводу данного урока, прошу пишите их в комментариях.

Что бы не тратить свое время на изучение css стилей, лучше ваш PSD макет отдать верстальщику-виртуозу, закажите верстку сайта у нашего специалиста, он лучше всего сверстает HTML код со всеми нынешними тенденциями и правилами.