mojwp.ru
Назад

Прозрачность в CSS на примере

Опубликовано: 23.08.2011
5
1105

Сделать элемент полупрозрачным на сайте при помощи CSS можно несколькими способами. Разберем самый распространенный.

Opacity

Прозрачность задается свойством opacity: 0.5, где 0 - полностью прозрачное, а 1 - не прозрачный. Шаг значений в 0.1

Допустим, у нас есть вот такая картинка:

Прозрачность в CSS на примере

Давайте ей зададим ей полупрозрачность в 50%. За картинкой размещу красный блок, чтобы было видно работу прозрачности.

img {opacity: 0.5;}
Прозрачность в CSS на примере

Наведите мышку на картинку и увидите как она становится снова не прозрачной, т.е. получает свойство opacity: 1;.

В данном случае мне пришлось взять картинку в контейнер:

.primer-opacity-1 {background: red;}
.primer-opacity-1 img {opacity: 0.5;}
.primer-opacity-1 img:hover {opacity: 1;}
Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • сергей
    Опубликовано: 11.10.2011 Ответить на сообщение

    Как сделать страницы прозрачными, можно узнать по конкретней. Что и куда вставлять.

  • mojvit
    Опубликовано: 11.10.2011 Ответить на сообщение

    насколько я понимаю, подразумевается не вся страница полностью (смысла нет), а часть, на которой будет статья.
    в коде своей темы (single.php) ищете контейнер div, который отвечает за стилистику текста внутри и оборачиваете его в еще один div, с помощью которого и будете делать эффект прозрачности, как показано выше.

    если это не то, что нужно, то сформулируйте вопрос более понятно

  • Pavel
    Опубликовано: 29.07.2012 Ответить на сообщение

    Ага, так и хочется навести курсор на картинку, чтобы сделать ее полноценной 🙂 Интересная вещь, спасибо!

  • Павел
    Опубликовано: 05.08.2012 Ответить на сообщение

    Обычно полупрозрачными делают баннеры. Смотрится симпатично.

  • Туйгунов Олег
    Опубликовано: 19.03.2014 Ответить на сообщение

    Вау очень интересный хак. Спасибо вам Виталий за интересные статьи. Кстати хочу заметить что у вас ошибочка во втором предложении статьи)))

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.