Узнайте о непрозрачности 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 с вашим текстом:

    1. Это моя собака Шаста. Разве он не милый!
  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. }

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

Оцените статью
Solutics.ru
Добавить комментарий