n-wp.ru — блог о WordPress

Как сделать картинки полупрозрачными

Если у вас темная тема, то светлые картинки выглядят слишком контрастно по отношению к остальному содержимому. Чтобы сделать их цвет слегка приглушенным, можно воспользоваться функцией полупрозрачности картинок, которую теперь понимают все браузеры. За примером далеко ходить не нужно — достаточно посмотреть на большие картинки в этом блоге.

Я думал, что мне придется использовать дополнительные плагины, но все оказалось гораздо проще. Достаточно в свой файл стилей style.css добавить одну-две строчки кода, и картинки становятся не просто полупрозрачными, но и «живыми».

Добавим полупрозрачности. Открываем файл style.css и найдем строчку #content img. Нету? Создадим! Есть? Изменим ее следующим образом:

#content img { border: 2px solid #101010; padding: 0px; opacity:0.4; filter:alpha(opacity=40)}

opacity:0.4 — прозрачность 40%

filter:alpha(opacity=40) — не специалист, но видимо то же самое. Можно согласованно менять эти параметрв от 0 до 100 (соответственно от 0.0 до 1.0).

Теперь сделаем так, чтобы при наведении курсора на картинку она становилась ярче. Для этого добавим сразу после этой строчки такой код:

#content img:hover { border: 2px solid #101010; padding: 0px; opacity:1.0; filter:alpha(opacity=100)}

Понятно, что видимость картинки стала 100%, поэтому она «вспыхивает» при подведении курсора.

Красота!

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

2 комментария

  • иногда параметр стиля ‘hover’ не срабатывает, и тогда я использую моё предновогоднее открытие, которое я использовал на сайте http://ulybka-np.ucoz.ru/photo/ — там пр наведении мышки на элементы таблицы они меняют стиль.
    итак, есть два класса:
    .mystyle {…}
    .mystyle-hover {…}
    таблицы, div’ы и ещё много кто не совсем любят реагировать на ‘:hover’, как я заметил. и тогда я использую:
    div class=»mystyle» onMouseOver=»this.className=’mystyle-hover'» onmouseout=»this.className=’mystyle'»