Сделайте ваши фоны прозрачными
Одной из вещей, которую вы легко можете сделать в дизайне печати, но не в Интернете, является наложение текста на изображение или цветной фон и изменение прозрачности этого изображения, чтобы текст переходил в фоновый режим. Но в CSS3 есть свойство, которое позволит вам изменять прозрачность ваших элементов так, чтобы они постепенно исчезали: opacity
.
Как использовать свойство непрозрачности
Свойство opacity принимает значение степени прозрачности от 0.0 до 1.0. 0.0 прозрачен на 100% – все, что ниже этого элемента, будет полностью видно. 1.0 на 100% непрозрачен – ничто под элементом не будет просвечивать.
Таким образом, чтобы установить прозрачность элемента на 50%, вы должны написать:
непрозрачности: 0,5;
Посмотрите некоторые примеры непрозрачности в действии
Обязательно протестируйте в старых браузерах
Ни IE 6, ни 7 не поддерживают свойство прозрачности CSS3. Но тебе не повезло. Вместо этого IE поддерживает только свойство Microsoft альфа-фильтр
. Альфа-фильтры в IE принимают значения от 0 (полностью прозрачные) до 100 (полностью непрозрачные). Итак, чтобы получить прозрачность в IE, вы должны умножить непрозрачность на 100 и добавить альфа-фильтр к своим стилям:
Фильтр : альфа (непрозрачность = 50);
Смотрите альфа-фильтр в действии (только IE)
И используйте браузерные префиксы
Вам следует использовать префиксы -moz -
и -webkit -
, чтобы старые версии браузеров Mozilla и Webkit также поддерживали его:
-webkit-opacity: 0,5;
-moz-opacity: 0,5;
opacity: 0,5;
Всегда ставьте префиксы браузера первыми, а действительное свойство CSS3 – последним.
Проверьте браузерные префиксы в старых браузерах Mozilla и Webkit.
Вы можете сделать изображения слишком прозрачными
Установите непрозрачность самого изображения, и оно исчезнет на заднем плане. Это действительно полезно для фоновых изображений.
А если вы добавите метку привязки, вы можете создавать эффекты при наведении, просто изменяя непрозрачность изображения.
a: hover img {
фильтр: альфа (прозрачность = 50)
фильтр: progid: DXImageTransform.Microsoft.Alpha (прозрачность = 50)
- непрозрачность moz: 0,5; непрозрачность веб-набора: 0,5; непрозрачность
: 0,5;
}
Влияет на этот HTML:
Проверьте вышеуказанные стили и HTML в действии.
Поместите текст на ваши изображения
С непрозрачностью, вы можете поместить текст поверх изображения и сделать так, чтобы изображение исчезало там, где находится этот текст.
Эта техника немного хитрая, потому что вы не можете просто исчезнуть изображение, так как это приведет к исчезновению всего изображения. И вы не можете исчезнуть текстовое поле, потому что текст там тоже исчезнет.
-
Сначала вы создаете контейнер
DIV
и размещаете свое изображение внутри: -
-
Следуйте за изображением с пустым
DIV
– это то, что вы сделаете прозрачным. -
-
Последнее, что вы добавите в свой HTML, это
DIV
с вашим текстом:-
-
- Это моя собака Шаста. Разве он не милый!
-
-
Вы стилизируете его с помощью CSS-позиционирования, чтобы разместить текст над изображением. Я поместил текст слева, но вы можете поместить его справа, изменив два свойства
left: 0;
наright: 0;
.#image {
- позиция: относительная;
- ширина: 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;
- }
-
Посмотрите, как это выглядит