Javascript-форум - Проблема с прозрачностью в IE

Javascript-форум (https://javascript.ru/forum/)

- Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)

- - Проблема с прозрачностью в IE (https://javascript.ru/forum/css-html-internet-explorer/9151-problema-s-prozrachnostyu-v-ie.html)

Проблема с прозрачностью в IE

Есть у меня <img> и текст заключенный в <b></b>. Так вот прозрачность картинки с помощью стилей отображается нормально, как в IE так и в других браузерах, а текст в IE не становится прозрачным. В других браузерах все нормально. Вот код:

<style type="text/css" class="unnamed1">
.zoom_buttons {
filter:alpha(opacity=30);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
}
</style>

...далее в body:

<img id='zoom_button+' class='zoom_buttons' src='images/zoom_menu/zoom_button+.png' style='position:relative;'/>
<b id='status_zoom' class='zoom_buttons' style='position:relative; font-size: 24px'>Тут, собственно текст, который должен быть прозрачным</b>

Для работы фильтров у элементов надо включить hasLayout, сделать это можно, например, задав размеры элемента или при помощи CSS-свойства zoom:1

Не сработало. У меня IE 8.
Пробовал ставить zoom: 2. В других браузерах работает - увеличивается вдвое, в IE ничего.

Покажите страничку.

Цитата:

Сообщение от Octane (Сообщение 53900)

Покажите страничку.

То есть?

Вот весь код, если для примера:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.zoom_buttons {
filter:alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}
</style>
</head>
<body>
<b id='status_zoom' class='zoom_buttons' style='zoom: 2'>200%</b>
</body>
</html>

Фильтр не работает для строчных элементов, либо добавьте display: inline-block; для <b>, либо используйте блочный элемент.

Благодарю!
ps/ и откуда вы столько знаете)

Цитата:

Сообщение от bayah

ps/ и откуда вы столько знаете)

Всего-лишь два года опыта JavaScript-программирования и четвертый год вёрстки :)

Я пока на второй неделе изучения javascript. Надеюсь когда мой стаж станет примерно таким же, то я тоже буду кое в чем разбираться)

Прозрачности текста добился, и сразу столкнулся с очередной проблемой. Текст к которому применяется прозрачность становится рубленным, кубиками в общем.

Вот что удалось найти:

Цитата:

С выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст - bold, например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

Видимо в IE 8 проблему снова "реализовали", так как у меня именно 8-ой.
Кстати сказать, установка свойства background-color решает проблему рубленого текста, но тогда пропадает смысл прозрачного текста: у меня фон не однородный(картинка) и к тому же все время перемещается под текстом. Таким образом установить определенный background-color так чтобы вокруг текста не появлялась рамка установленного цвета не получится.

Вот еще нашел еще одно решение проблемы зазубренного текста(http://olmokhov.livejournal.com/46463.html), только мне оно не помогло, и чувствую не совсем для моего случая оно. Вдобавок не пойму собственно смысл этого кода. Такое чувство, что я залез в какие-то дебри для гуру.)

Да, IE8 отключает сглаживание текста при использовании прозрачности без фона. Необходимость в прозрачном тексте сомнительна.

Цитата:

Сообщение от Octane (Сообщение 53933)

У меня просто окно в котором зумится картинка. Слева меню в виде png картинок зум+, зум- и еще текст отображающий какой процент от реального размера картинки сейчас отображается. Вот этот собственно текст и делается полупрозрачным если на него не наведен курсор. Чтобы не мешать просмотру.