Основы css - изучение веб-разработки

Рассмотрим пример

Создаём файл index.html

<html>  <head>  <title>  Название странички  </title>  <style>  .opacity:hover {  filter:alpha(opacity=50);  /*  для IE 5.5+ */  -moz-opacity:0.5;  /* для Mozilla 1.6 и ниже */  -khtml-opacity:0.5;  /* для Konqueror 3.1, Safari 1.1 */  opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */  }  .square {  width: 100px;  height: 100px;  background: black;  }  </style>  </head>  <body>  <h1>Полупрозрачность элемента</h1>  Делаем изображение полупрозрачным при наведении!  <div class="square opacity"></div>  </body>  </html>

Демонстрация Скачать исходники

Спасибо за внимание!

Техническая сторона вопроса: задаем прозрачность фона

Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.

Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):

При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.

Поэтому следует знать о таком варианте работы с прозрачностью (возьмем в качестве примера ситуацию, когда блок меню на прозрачном фоне должен быть непрозрачным).

Исходный код:

Видоизменяем код на такой:

Задача решена. Такой метод можно использовать в тех случаях, когда нужно сделать непрозрачными те элементы, которые находятся внутри кода.

Техническая сторона вопроса: задаем прозрачность блока

Если прозрачность фона уже задана, то прозрачность блока, расположенного внутри него, в CSS задается автоматически. Об этом говорилось выше.

Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:

HTML код:

CSS стили:

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

Активность при наведении

Так как CSS-прозрачность чаще всего используется как оформление для элементов с гиперссылками, то активность при наведении на них становится одной из первостепенных задач. В качестве примера можно рассмотреть тот же прямоугольник. Допустим, необходимо, чтобы при наведении на блок прозрачность менялась с 0 до значения 0.5. Для получения такой возможности понадобится всего лишь занести уже имеющийся стиль, отвечающий за прозрачность, под дополнительный CSS-параметр hover. Данным свойством пользуются и для добавления таких эффектов, как изменение цвета и формы объектов при наведении

Это позволяет сделать необходимые области визуально активными, привлекая внимание посетителей к ссылкам или контенту

Часть 3. Медиа-запросы

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

В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Типографика

Все свойства, которые влияют или находятся под влиянием шрифта, должны быть объявлены в одном месте, сразу после какого-нибудь . Также можно добавлять классы для шрифтов, которые меняют (через ) и задают те , и , которые подходят для заданного шрифта и его размера. После этого нигде не должны использоваться или (за исключением ).

Вебинар «Как попасть в IT без опыта и остаться там»
12 марта в 16:00, Онлайн, Беcплатно

tproger.ru

События и курсы на tproger.ru

Объявление данных свойств вместе с гарантирует, что страницы сайта всегда будут выглядеть правильно. Настройка вместо или может вызвать ошибки при обвёртывании текста. А установка отдельно от всех остальных свойств (стилей), касающихся шрифта, приведёт к faux bold font. Изменение для шрифта, который не поддерживается, тоже ведёт к неправильному его отображению.

Устанавливайте размер шрифта в единицах. Использование приведёт к проблемам при вложении элементов, так как является скалярным кратным текущему размеру шрифта. может создать нечитаемый и контент. Позвольте пользователю (или браузеру пользователя) установить подходщий им размер шрифта — не объявляйте размер шрифта в или элементе и используйте только .

Способ 4. Современный

До этого я рассказывал, что RGB – это одна из популярных цветовых моделей, где R отвечает за все оттенки красного, G – оттенки зеленого и B – оттенки синего.

В случае с параметром css переменная A отвечает за альфа-канал, который в свою очередь отвечает за прозрачность.

rgba (r, g, b, a) поддерживается начиная с:

10 версии Opera;
Internet Explorer 9;
Safari 3.2;
3 версии Firefox.

Хочу отметить интересный факт! Горячо любимый Internet Explorer 7 выдает ошибку при сочетании свойства background-color
с названием цветов (background-color: gold). Поэтому стоит использовать только:

А теперь пример.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Пример 3
В нашем магазине вы найдете все виды цветов.

Обратите внимание, что текстовый контент блока полностью виден (100% черный), в то время как фону задан альфа-канал равный 0,88, т.е. 88%

Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

CSS прозрачная сводка навыков

1. Старые настройки непрозрачности

Следующий код является настройкой прозрачности, необходимой для более старых версий Firefox и Safari:

Вторая строка использует специальный атрибут -moz-opacity, чтобы быть совместимым с более ранними версиями движка рендеринга Mozilla и прослеживать до Netscape Navigator. Firefox 0.9 не требует свойства -moz-opacity, Firefox 3.5 (теперь использует движок Gecko) больше не поддерживает это свойство.

2. Прозрачность CSS в Firefox, Safari, Chrome и Opera.

Следующий код является самым простым и последним синтаксисом CSS для всех текущих браузеров, кроме IE:

Приведенный выше синтаксис установит непрозрачность элемента на 70% (или прозрачность на 30%). Установка непрозрачности: 1 сделает элемент непрозрачным, а установка непрозрачности: 0 сделает элемент полностью невидимым. Пока вы помните, что «непрозрачность» эквивалентна «непрозрачности», легко запомнить, чем меньше значение непрозрачности, тем ближе к прозрачности.

Свойство opacity может содержать ровно два десятичных знака, поэтому значения «.01» и «.02» на самом деле различны, хотя видимость трудно определить. При нормальных обстоятельствах он может быть точным с точностью до одной цифры, а значение будет похоже на «.3» или «.7».

3. CSS прозрачность под IE

IE по-прежнему отличается от других браузеров, и в настоящее время широко используются три разные версии IE.Настройки прозрачности отличаются, и иногда для управления требуется дополнительный CSS:

Приведенный выше CSS использует специальный атрибут фильтра для установки прозрачности IE6-8. Примечание для IE6 и IE7: чтобы настройки прозрачности вступили в силу, элемент должен быть «с макетом». Элемент может быть размечен с использованием некоторых свойств CSS, таких как ширина и положение.

Другой синтаксис для настройки прозрачности CSS в IE8 выглядит следующим образом:

Первая строка кода предназначена для всех текущих версий IE, а вторая — только для IE8.Обратите внимание на разницу между двумя строками кода: во второй строке кода за атрибутом фильтра следует префикс -ms-, а значение атрибута заключено в кавычки, что требуется синтаксисом.

Если честно, после использования синтаксиса alpha (opacity = 40), как в предыдущем примере, для применения любых элементов макета под любой версией IE, не ясно, нужно ли использовать метод «progid».

Атрибут background-repeat

Как правило, если фон задан изображением, он должен повторяться по горизонтали или вертикали. Для этого и используется атрибут background-repeat. Так, фон блока, CSS которого содержит такое свойство, может иметь один из нескольких параметров:

no-repeat
— изображение появляется на странице в единственном варианте;
repeat
— фон повторяется по осям x и y;
repeat-x
— только по горизонтали;
repeat-y
— только по вертикали;
space
— фон повторяется, но если пространство заполнить не получается, то между картинками появляются пустоты;
round
— изображение масштабируется, если не получается всю область заполнить целыми картинками.

Пример использования атрибута:

body {background-repeat: no-repeat repeat}
— аналогично background-repeat: repeat-y.

В CSS3 возможно задать значения для нескольких изображений, если перечислять параметры через запятую.

CSS opacity (CSS прозрачность)

W3C в своей рекомендации CSS3 определяет свойство для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

Браузеры поддерживающие CSS3 opacity

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

Для установки прозрачности через скрипт используем: object.style.opacity

Mozilla 1.6 и ниже, Firefox 0.8

Старые Mozilla и Firefox 0.8 используют своё название данного свойства: -moz-opacity

Для установки прозрачности через скрипт используем: object.style.MozOpacity

Safari 1.1, Konqueror 3.1

Данные товарищи, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity

Для установки прозрачности через скрипт используем: object.style.KhtmlOpacity

Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел поддержку CSS3 opacity.

Причиной по которой Konqueror утратил возможность реализации эффекта прозрачности как раз и заключается во внесение в ядро KHTML патчей от Safari, т.к. Safari использует возможности присутствующие в Mac OS X, но которых нет в KDE.

Конечно рано или поздно эта ситуация будет исправлена, но на данный момент в последней версии 3.5 ситуация остается прежней.

Internet Explorer 5.5+

Данный браузер, начиная с версии 5.5 и включая последнюю на сегодняшний день версию Internet Explorer 7, реализует прозрачность через Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же отмечу, что фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.

Пример (устанавливаем прозрачность на половину):
Для установки прозрачности через скрипт используем: object.style.filter = «progid:DXImageTransform.Microsoft.Alpha(строка параметров)». Для получения прозрачности аналогичной прозрачности W3C используем в качестве строки параметров значение «opacity=число от 0 до 100». Описание всех параметров смотрите на странице описания фильтра

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

К счастью в IE7 баг устранен.

Атрибут background-repeat

no-repeat
— изображение появляется на странице в единственном варианте;
repeat
— фон повторяется по осям x и y;
repeat-x
— только по горизонтали;
repeat-y
— только по вертикали;
space
— фон повторяется, но если пространство заполнить не получается, то между картинками появляются пустоты;
round
— изображение масштабируется, если не получается всю область заполнить целыми картинками.

Пример использования атрибута:

body {background-repeat: no-repeat repeat}
— аналогично background-repeat: repeat-y.

В CSS3 возможно задать значения для нескольких изображений, если перечислять параметры через запятую.

opacity | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.0+	2.0+	1.7+	2.0+	1.0+

Краткая информация

Значение по умолчанию	1
Наследуется	Нет
Применяется	Ко всем элементам
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/css3-color/#transparency

Описание

Значения

В качестве значения выступает число из диапазона . Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования opacity

Браузеры

Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Использование JavaScript или jquery для достижения прозрачности изменений в CSS

Как добиться эффекта полупрозрачного фона с помощью CSS? Наш общий подход состоит в том, чтобы использовать два слоя, один для текста, а другой для прозрачного фона, потому что эффект прозрачного фильтра будет влиять на содержимое внутри.

Однако, если вам нужно реализовать это только в IE, есть много решений для достижения прозрачности с использованием CSS, здесь просто для ознакомления с общими для всех методами:

Зная принцип CSS, изменяющий прозрачность, затем использовать javascript для динамического изменения прозрачности очень просто:

jQuery меняет прозрачность следующим образом:

Использование jQuery также может легко обеспечить анимационные эффекты:

Прозрачность различных элементов

Рассмотрим некоторые примеры задания прозрачности определенным элементам, которые чаще всего используются на странице.

CSS прозрачность картинки.

Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.

Прозрачность

Результат:

Прозрачность на CSS при наведении курсора на картинку.

Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса:hover. Для этого нашей картинке нужно прописать два класса один обычный — это будет неактивное состояние картинки и второй класс с псевдоклассом:hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.

Прозрачность

Результат можете посмотреть в демо.

Прозрачность фона на CSS.

Здесь необходимо помнить, что прозрачность распространяется на все вложенные элементы и они не могу обладать большей прозрачностью чем вложенный элемент.

В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.

Пример кода:

Прозрачность
Текст

Вот результа размещенного выше кода:

Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)

Эффект полупрозрачности
элемента хорошо заметен на фоновом рисунке и получил распространение в разных операционных системах, потому что смотрится стильно и красиво. Главное, иметь под полупрозрачными блоками не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной.

Такой эффект достигается разными способами, включая старомодные методы, как использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity. Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятные оборотные стороны.

Рассмотрим полупрозрачность текста и фона — как правильно ее использовать в дизайне сайта:

Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными. Увеличить уровень прозрачности можно изменяя команду opacity от 0.1 до 1.

HTML 5 CSS 3 IE 9

opacityСоздание и продвижение сайтов в интернете

В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента.

Обычно в дизайне полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1, при этом 0 означает полную прозрачность, а 1 непрозрачность цвета — синтаксис применения rgba.

Полупрозрачный фон
HTML 5 CSS 3 IE 9

rgbaСоздание и продвижение сайтов в интернете.

Задание фона в RGBA

Избежать этой проблемы мы сможем в том случае, если откажемся от использования opacity и зададим значение для css-свойства background в формате RGBA.

Формат RGBA дает нам возможность задать значение цвета, используя значение красного, зеленого, а так же синего цветов в десятичном виде, а так же, позволяет задать прозрачность при помощи использования альфа-канала. Уровень альфа-канала задается в интервале от 0 до 1. То есть, так же как и в css-свойстве opacity.
Например так:
background:rgba(255,255,255,0.6);

Для наглядности добавим в блок с фоном еще один элемент с текстом, для которого зададим в css фон в формате RGBA с уровнем прозрачности 0.3.

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

Блок без прозрачности

Демонстрация работы css-свойства opacity

Так выглядит фон с RGBA

В код страницы был добавлен следующий фрагмент HTML-кода:

XHTML

<div class=»rgba»>
Так выглядит фон с RGBA
</div>

1
2
3

Так выглядит фон с RGBA
</div>

В css-файл я прописала следующие свойства для соответствующего класса:

CSS

.rgba{
width: 300px;
padding:30px;
margin:auto;
text-align:center;
margin:10px;
font-size:18px;
color:#fff;
background:rgba(0,0,0,0.3);
}

1
2
3
4
5
6
7
8
9
10
11

.rgba{

width300px;

padding30px;

marginauto;

text-aligncenter;

margin10px;

font-size18px;

color#fff;

backgroundrgba(0,0,0,0.3);

}

На этом у меня сегодня все. Используя описанные в данной статье возможности CSS3, вы сможете задать любой уровень прозрачности с помощью css для нужного блока, что поможет вам добиться наиболее подходящего внешнего вида для своего сайта. А я надеюсь, что мне удалось раскрыть тему, и у вас не возникнет сложностей с применением данных приемов работы.

С уважением Юлия Гусарь

Кто дает право присваивать коды DOI научным материалам?

Индекс DOI начали присваивать электронным материалам с 2000 г. Стандарты его использования устанавливаются головной организацией – International DOI Foundation (IDF).

Коды к отдельным материалам выдаются специальными регистрационными агентствами. Каждое индивидуальное агентство занимается отдельным типом объектов или документов: аудиоматериалами, видеофайлами, ресурсами интернета и т. д.

Регистрацией именно научных статей, монографий, материалов конференций и диссертаций занимается влиятельная компания «CrossRef». «CrossRef» – это некоммерческая ассоциация научных издательств, насчитывающая около 2000 членов, которая призвана способствовать научной коммуникации по всему миру за счет развития научной инфраструктуры, содействует поиску и цитированию научной информации на просторах Интернета. База «CrossRef» насчитывает более 68 миллионов статей и других научных материалов (книг, диссертаций, научных отчетов и т. д.). Большинство ключевых и авторитетных академических журналов активно взаимодействуют именно с ней.

Полный список всех изданий, имеющих собственный префикс DOI, размещен на сайте.

Результат примера с RGBA:

Второй скриншот намного лучше смотрится, чем первый.

Играясь с полупрозрачностью фона блоков, можно добиться на сайте интересных эффектов

Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен

Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3
, реализовывался он чисто в графических программах.

Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer
, тогда добавляйте свойство filter
и не забудьте закомментировать, чтобы не пострадала валидность кода.

Кросс-браузерность прозрачности

Не все браузеры одинаково воспринимают и реализуют указанное выше свойство opacity. В некоторых случаях необходимо использовать другое название свойства или фильтры.

Свойство CSS3 opacity поддерживают следующие виды браузеров Mozilla 1.7 +, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.

Такой хороший браузер как Internet Explorer вплоть до версии 9,0 не поддерживает свойство opacity и для создания прозрачности для этого браузера нужно использовать свойство filter и значение alpha(Opacity=X), в котором Х — это целое число в диапазоне от 0 до 100 при помощи которого определяется уровень прозрачности. 0 — это полная прозрачность, а 100 — полная непрозрачность.

Что касается браузера Firefox до версии 3.5 он поддерживает свойство -moz-opacity вместо opacity.

Такие браузеры как Safari 1.1 и Konqueror 3.1, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity.

Как же задать в CSS прозрачность, чтобы это выглядело во всех браузерах одинаково? Для создания кросс-браузерного решения для прозрачности элементов им нужно прописывать не только одно свойство opacity, а следующий набор свойств:

Как найти или скачать статью по DOI?

Благодаря идентификатору DOI можно легко отыскать требуемую статью самостоятельно, в частности, на сайте International DOI Foundation или Crossref.

1. Поиск через International DOI Foundation. На сайте //www.doi.org/ в соответствующей строке поиска вводите код, нажимаете Submit:

и вот уже перед глазами страница публикации на сайте издателя с указанием всех ее данных:

2. Поиск через Crossref. На сайте //search.crossref.org/ в поле поиска также вводите код:

и получаете всю информацию по базе Crossref, включая том, номер и страницы размещения статьи в журнале:

Издательство само определяет степень доступности статьи. Если статья находится в открытом доступе, ее можно будет скачать, а если в закрытом – увидеть ее аннотацию и описание. Затем ее можно будет поискать в базах полнотекстовых научных статей, попасть в которые можно в библиотеке научной организации или ВУЗе, имеющих подписку.

Значимо и то, что по DOI всегда можно отыскать информацию о статье, даже если издательство уже не работает или его сайт недоступен.

:hover для простой смены прозрачности

Ещё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover, который позволяет определить стили для элемента, в момент наведения на него мыши.

<style type="text/css"> a:hover img {  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);  -moz-opacity: 0.3;  -khtml-opacity: 0.3;  opacity: 0.3; } </style>  <a href="javascript:void(0)"> <img src="/images/articles/strawberry.jpg" width="100" height="80" /> </a>

Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор :hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено)

Кросс-браузерность прозрачности

Свойство CSS3 opacity поддерживают следующие виды браузеров Mozilla 1.7 +, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.

Такой хороший:) браузер как Internet Explorer вплоть до версии 9,0 не поддерживает свойство opacity и для создания прозрачности для этого браузера нужно использовать свойство filter и значение alpha(Opacity=X), в котором Х — это целое число в диапазоне от 0 до 100 при помощи которого определяется уровень прозрачности. 0 — это полная прозрачность, а 100 — полная непрозрачность.

Что касается браузера Firefox до версии 3.5 он поддерживает свойство -moz-opacity вместо opacity.

filter: alpha(Opacity=50); /* Прозрачность для IE */
-moz-opacity: 0.5; /* Поддержка Mozilla 3.5 и ниже */
-khtml-opacity: 0.5; /* Поддержка Konqueror 3.1 и Safari 1.1 */
opacity: 0.5; /* Поддержка всех остальных браузеров */