Веб-Денис
Помогаем создавать лучшее
  • Ответы WP
  • HTML-CSS
  • Фон сайта
  • Блог DM
Главная › HTML-CSS › Картинки

Прозрачность картинки CSS

Создаём прозрачность в картинках
2022-05-15
Автор: неизвестно
Demo

Всем приветы и ответы!

Шесть лет назад, когда я создал свой очередной сайт на просторах интернета, а стандартны CSS3 только внедрялись в массы, я задался очень важным вопросом:

Почему картинка установленная в ссылки на сайте, не взаимодействует со стрелкой мышки пользователя?

Вспомните любую ссылку которую вы видите на любом сайте, когда вы наводите на неё курсор мыши, то она меняется, а ссылка взаимодействует с действием пользователя при наведении или при нажатие на неё.

ССылка меняет свой цвет

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

Так вот, почему с картинкой в ссылки не происходит каких либо действий, меняется только курсор?

Как задать прозрачность в CSS стилях?

Для того чтобы решить данную задачу, следует в CSS стили добавить следующую строчку кода:

CSS

body a:hover img {
opacity: 0.7;
}

Второй способ CSS прозрачность картинки!

Данное решение подойдёт для сайтов, которые хотят добавить счетчикам статистики прозрачность, дабы не выделять их на фоне всего дизайна.

Для того чтобы добиться нужного результата, следует поместить весь HTML код счётчика в ячейку div с нужным нам классом:

HTML

<div class="opacity">
<a href="#"><img alt="счетчик пример 1" src="img/1.gif" /></a>
<a href="#"><img alt="пример счетчик 2" src="img/2.gif" /></a>
<a href="#"><img alt="счетчик 88x31" src="img/3.gif" /></a>
</div>

а в завершении данного решения, прописать CSS стили:

CSS

.opacity a img {opacity:0.3;}
.opacity a:hover img {opacity:1.0;}

На этом у меня всё! Удачных решений!

С уважением, Денис Мехедов

А Вы оставите комментарий первым?

    Отменить ответ
    Автор Денис Мехедов
    Привет!

    Я Денис Мехедов.

    Я верстаю HTML-CSS:

    Решений - 14
    • Горизонтальное меню 1
    • Картинки 1
    • Кнопки 2
    • Облако тегов 3
    • Подсказки 1
    • Поля 1
    • Списки 1
    • Статистика 1
    • Табы 1
    • Цитаты 2

    • О проекте
    • Автор
    • Контакты
    • Комментарии
    • © Web-Denis 2022
    • Дизайн © ДМ
    • Хостинг Timeweb
    При копировании материалов, ссылка на сайт обязательна.
    Политика конфиденциальности
    Мы cохраняем файлы cookie.