Содержание
Одной из вещей, которую вы легко можете сделать в дизайне печати, но не в Интернете, является наложение текста на изображение или цветной фон и изменение прозрачности этого изображения, чтобы текст переходил в фоновый режим. Но в CSS3 есть свойство, которое позволит вам изменять прозрачность ваших элементов так, чтобы они постепенно исчезали:
помутнение
Как использовать свойство непрозрачности
Свойство opacity принимает значение степени прозрачности от 0.0 до 1.0. 0.0 полностью прозрачен — все, что ниже этого элемента, будет полностью видно. 1.0 полностью непрозрачен — ничто под элементом не будет просвечивать.
Таким образом, чтобы установить прозрачность элемента на 50%, вы должны написать:
Непрозрачность: 0,5;
Посмотрите некоторые примеры непрозрачности в действии
Обязательно протестируйте в старых браузерах
Все новые браузеры поддерживают CSS3, но некоторые старые не поддерживают. Ни IE 6, ни 7 не поддерживают свойство прозрачности CSS3. Но тебе не повезло. Вместо этого IE поддерживает альфа-фильтр свойств только для Microsoft.
Альфа-фильтры в IE принимают значения от 0 (полностью прозрачные) до 100 (полностью непрозрачные). Итак, чтобы получить прозрачность в IE, вы должны умножить непрозрачность на 100 и добавить альфа-фильтр к своим стилям:
фильтр: альфа (непрозрачность = 50);
Смотрите альфа-фильтр в действии (только IE)
И используйте браузерные префиксы
Вы должны использовать
-moz-
а также
-webkit-
префиксы для поддержки старых версий браузеров Mozilla и Webkit:
-непрозрачность webkit: 0.5;
-моз-непрозрачность: 0,5;
непрозрачность: 0,5;
Всегда ставьте префиксы браузера первыми, а действительное свойство CSS3 — последним.
Проверьте браузерные префиксы в старых браузерах Mozilla и Webkit.
Вы можете сделать изображения слишком прозрачными
Установите непрозрачность самого изображения, и оно исчезнет на заднем плане. Это действительно полезно для фоновых изображений.
А если вы добавите метку привязки, вы можете создавать эффекты при наведении, просто изменяя непрозрачность изображения.
a: hover img {
фильтр: альфа (непрозрачность = 50)
фильтр: progid: DXImageTransform.Microsoft.Alpha (непрозрачность = 50)
-моз-непрозрачность: 0,5;
-непрозрачность webkit: 0.5;
Непрозрачность: 0,5;
}
Поместите текст на ваши изображения
С непрозрачностью, вы можете поместить текст поверх изображения и сделать так, чтобы изображение исчезало там, где находится этот текст.
Эта техника немного хитрая, потому что вы не можете просто исчезнуть изображение, так как это приведет к исчезновению всего изображения. И вы не можете исчезнуть текстовое поле, потому что текст там тоже исчезнет.
- Сначала вы создаете контейнер
DIV
и поместите ваше изображение внутри:
- Следуйте за изображением с пустым
DIV
— это то, что вы сделаете прозрачным.
- Последнее, что вы добавляете в свой HTML, это
DIV
с вашим текстом в нем:
Это моя собака Шаста. Разве он не милый!
- Вы стилизируете его с помощью CSS-позиционирования, чтобы разместить текст над изображением. Я поместил свой текст на левой стороне, но вы можете поставить его справа, изменив два
Слева направо: 0;
свойства к
право: 0;
.
#image {position: относительный;
ширина: 170 пикселей;
высота: 128px;
Маржа: 0;
}
#text {
позиция: абсолютная;
верх: 0;
Слева направо: 0;
ширина: 60px;
высота: 118px;
фон: #fff;
обивка: 5px;
}
#text {
фильтр: альфа (непрозрачность = 70);
фильтр: progid: DXImageTransform.Microsoft.Alpha (непрозрачность = 70);
-непрозрачность: 0,70;
Непрозрачность: 0,7;
}
#words {
позиция: абсолютная;
верх: 0;
Слева направо: 0;
ширина: 60px;
высота: 118px;
фон: прозрачный;
обивка: 5px;
}
- Вы стилизируете его с помощью CSS-позиционирования, чтобы разместить текст над изображением. Я поместил свой текст на левой стороне, но вы можете поставить его справа, изменив два
Посмотрите, как это выглядит