Узнайте о непрозрачности CSS3

Сделайте ваши фоны прозрачными

Одной из вещей, которую вы легко можете сделать в дизайне печати, но не в Интернете, является наложение текста на изображение или цветной фон и изменение прозрачности этого изображения, чтобы текст переходил в фоновый режим. Но в 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 в действии.

Поместите текст на ваши изображения

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

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

1. Сначала вы создаете контейнер DIV и размещаете свое изображение внутри:
2. Следуйте за изображением с пустым DIV – это то, что вы сделаете прозрачным.

3. Последнее, что вы добавите в свой HTML, это DIV с вашим текстом:
   3. Это моя собака Шаста. Разве он не милый!

4. Вы стилизируете его с помощью CSS-позиционирования, чтобы разместить текст над изображением. Я поместил текст слева, но вы можете поместить его справа, изменив два свойства left: 0; на right: 0; . #image {
   1. позиция: относительная;
   2. ширина: 170 пикселей;
   3. высота: 128px;
   4. Маржа: 0;
   5. }
   6. #text {
   7. позиция: абсолютная;
   8. верх: 0;
   9. Слева направо: 0;
   10. ширина: 60px;
   11. высота: 118px;
   12. фон: #fff;
   13. обивка: 5px;
   14. }
   15. #text {
   16. фильтр: альфа (непрозрачность = 70);
   17. фильтр: progid: DXImageTransform.Microsoft.Alpha (непрозрачность = 70);
   18. -моз-непрозрачность: 0,70;
   19. Непрозрачность: 0,7;
   20. }
   21. #words {
   22. позиция: абсолютная;
   23. верх: 0;
   24. Слева направо: 0;
   25. ширина: 60px;
   26. высота: 118px;
   27. фон: прозрачный;
   28. обивка: 5px;
   29. }

Посмотрите, как это выглядит