• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • Бинарные опционы
  • Вопросы и ответы
  • Полезные SEO статьи
  • SEO словарь
  • HTML-уроки и советы
  • Мои услуги
  • Реклама на сайте
  • Контакты
Главная → HTML уроки и советы → CSS → Свойство CSS opacity

Свойство CSS opacity

Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.


Синтаксис CSS opacity

opacity: value;

Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 - означает, что прозрачность отсутствует (по умолчанию).


Примеры: как прозрачность в html

Пример №1. Прозрачное изображение в html

Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5

<html> <head> <style> .primer1{ padding: 5px; opacity: 0.5; } </style> </head> <body> <img src="img/opacity-1.jpg"> <img class="primer1" src="img/opacity-1.jpg"> </body> </html>

На странице преобразуется в следующее



Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

<html> <head> <style> .primer2{ padding: 5px; opacity: 0.5; } .primer2:hover{ padding: 5px; opacity: 1; cursor: pointer; } </style> </head> <body> <img class="primer2" src="img/opacity-1.jpg"> </body> </html>

На странице преобразуется в следующее


Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

<html> <head> <style> .primer3{ padding: 5px; opacity: 1; } .block3{ width: 100px; height: 100px; background: #1E90FF; margin: 0px 0px -60px 80px; border: 1px solid #000; opacity: 0.5; } </style> </head> <body> <div class="block3"></div> <img class="primer3" src="img/opacity-1.jpg"> </body> </html>

На странице преобразуется в следующее


Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.


Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

object.style.opacity="VALUE"


Читайте также:
• text-shadow
• Свойство zoom
• Отступы padding
• Отступы margin
• Как сделать рамку элементов border
• Как сделать фон на сайте html
• Как сделать анимацию в html
• Как сделать линейный градиент
• Радиальный градиент CSS

← Перейти в каталог CSS уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Интернет
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2019 - Zarabotat-Na-Sajte.ru