Используйте непрозрачность CSS3, чтобы сделать прозрачный фон

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

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

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

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

  1. Сначала вы создаете контейнер
    DIV

    и поместите ваше изображение внутри:

  2. Следуйте за изображением с пустым
    DIV

    — это то, что вы сделаете прозрачным.

  3. Последнее, что вы добавляете в свой HTML, это
    DIV

    с вашим текстом в нем:

  4. Это моя собака Шаста. Разве он не милый!
    1. Вы стилизируете его с помощью CSS-позиционирования, чтобы разместить текст над изображением. Я поместил свой текст на левой стороне, но вы можете поставить его справа, изменив два
      Слева направо: 0;

      свойства к

      право: 0;

      .

      #image {position: относительный;
    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. }

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

Ссылка на основную публикацию