Как затемнить изображение с помощью CSS?
Способ 1. Использование свойства фильтра. Свойство фильтра используется для применения различных графических эффектов к элементу. Функция яркости () может использоваться в качестве значения, чтобы применить линейный множитель, чтобы он казался темнее или светлее, чем оригинал. Чтобы сделать изображение темнее, любое значение ниже 100% можно использовать для затемнения изображения на этот процент.
Синтаксис:
Пример:
How to Darken an Image
< h1 style = «color: green» >
How to Darken an Image
The image below is the
The image below is the
< div class = «darkened-image» ></ div >
Выход:
Способ 2. Использование свойства background-image с линейным градиентом: Свойство background-image в CSS поддерживает использование нескольких фонов, которые накладываются друг на друга. Используя свойство линейного градиента, черный фон используется в качестве переднего слоя, а затемняемое изображение — в качестве заднего слоя. Порядок свойства background-image определяет передний слой, который должен быть указан первым перед определением слоев сзади.
Непрозрачность градиента черного можно изменить, чтобы контролировать степень затемнения. Это может быть использовано соответственно для затемнения изображения по мере необходимости.
Синтаксис:
Пример: использование непрозрачности 0,5 градиента фона для затемнения изображения.
Как сделать затемнение фона через CSS
Очень часто я стал видеть на сайтах затемнение фона. Особенно часто это делается в галереях, где по клику на изображение, оно увеличивается, а вся остальная часть затемняется. Безусловно, практически везде стоит специальный плагин JQuery, но в этой статье я расскажу, как сделать затемнение фона через CSS, не прибегая к JQuery.
Давайте напишу HTML-код:
Здесь я добавил одну таблицу, в качестве тестового контента, который будет затемнён. А также блок TB_overlay, который и является ключевым, то есть он будет затемнять. Привожу CSS-код:
#TB_overlay background-color: #000; /* Чёрный фон */
height: 100%; /* Высота максимальна */
left: 0; /* Нулевой отступ слева */
opacity: 0.50; /* Степень прозрачности */
position: fixed; /* Фиксированное положение */
top: 0; /* Нулевой отступ сверху */
width: 100%; /* Ширина максимальна */
z-index: 100; /* Заведомо быть НАД другими элементами */
>
Здесь я постарался прокомментировать, но обратите внимание на свойство opacity. Чем выше значение, тем более сильное затемнение. Максимальное значение 1. Фактически, данный способ затемнения фона через CSS очень прост: идёт наложение на весь контент чёрного блока с определённой прозрачностью.
На мой взгляд, данный способ затемнения очень простой и понятный, поэтому он и применяется чаще всего.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 8 ):
Добрый вечер, Михаил. Я скопировала код, но появилась только таблица, без всякого затемнения. Почему?
Попробуйте в других браузерах, если не получится, значит, как-то не так подключили стили.
Михаил, добрый день. Я новичок, и учусь писать ХТМЛ странички. Есть такой вот код, наверное он даже вашего производства: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=cp-1251"> <title>Всплывающая Подсказка</title> <style type="text/css"> <!— .dlink #wind —> </style> </head> <body> <div><a href="#" title="Всплывающее окно" onClick="document.getElementById (‘wind’).style.display=’block’; return false;">Пояснения</a></div> <div align="center"> <table cellspacing="0" align="right"> <tr><td style="padding: 0 3 0 3; background-color: #A0A050; /* цвет кнопки закрыть #A0A050 можете вставить свой */ font-family: Verdana; font-size: 10pt; color: #ffffff; font-weight: bold;" onClick="document.getElementById(‘wind’).style.display=’none’; return false;" onMouseOver="this.style.cursor=’pointer’" onMouseOut="this.style.cursor=’default’">X</td> </tr> </table> Здесь на месте этого текста ставьте свой текст или html код. </div> </div> </body> </html> Подскажите пожалуйста, как интегрировать сюда затемнение, чтобы при открытии модального окна все затемнялось кроме самого окна. Перепробовал кучу вариантов с вашим кодом, но получается только затемнение, само окно остается под затемнением
Это убогий код, и он явно не моего производства. Как интегрировать в эту помойку модальное окно — не знаю. Лучше всё написать заново. Если Вы не знаете, как такое написать, то изучайте HTML. Копировать откуда-то чужой да ещё и кривой код — бесполезная затея.
Затемнение изображения и фона с помощью CSS
Несколько примеров как затемнить изображение в свойстве background и теге <img> .
Затемнение <img>
Первый способ затемнить img
Сделать тёмный фон под изображением <img> , а самому изображению добавить прозрачность с помощью opacity .
Пример:
Второй способ затемнить img
CSS фильтр Фильтр brightness у <img> .
Пример:
Третий способ затемнить img
Полупрозрачный элемент над <img> .
Пример:
Пример:
Затемнение фона background
Если картинка задана через свойство background , то есть два способа ее затемнить:
Первый способ затемнить background
Наложить полупрозрачный слой через псевдо-свойство :before с background-color: rgba(0,0,0,.5) или opacity: 0.6 .
Как затемнить фон картинки через css, чтобы при наведении на нее мышкой она осветлялась
Мне было интересно, как делают на блогах так, что картинки темные, а когда наводишь на них мышкой — они становятся светлыми. Я задался этим вопросом и решил его. Все материалы, коды предназначены для движка WordPress, ибо на других я не работаю и не сталкивался с ними.
Наш вопрос: Ка затемнить рисунок, чтобы при наведении на него мышкой он осветлялся.
Примеры работы затемнения вы можете посмотреть у меня на блоге в трех местах: 1) Счетчики в футере (очень затемненные); 2) Кнопки социальных закладок (средне затемненные); 3) Кнопки подписки на новости в сайдбаре (мало затемненные). Чтобы попробовать как это работает, просто наведите на соответствующую картинку.
Собственно приступим к реализации:
Все элементы затемнения задаются специальным кодом. Прописывается этот код в wordpress в файле style.css. То есть 1) Открываем файл style.css.
Наш следующий шаг — придумать название для кода. Для затемнения групп картинок ( у меня это: счетчики, кнопки соц закладок, кнопки подписок) я использую отдельные коды (классы — class), то есть 3 разных класса. Можно придумать кучу разнообразных затемнений, как для групп картинок, так и для каждой в отдельности.
Каждый на блоге имеет счетчики, давайте проведем эксперимент над ними. Возьмем название schetchiki.
2) В самом низу страницы style.css вставляем следующее:
Для чего нужен этот блок. Как видно, я уже вписал в сам блок объяснения, но раскрою подробнее: font-size — задает размер шрифта, если мы будем писать что-то в блок с картинками. font-weight — определяет стиль текста, в моем случае blod — жирный (можно так же поставить normal, bolder, lighter). padding — определяет отступ от границы, то есть расстояние от вашего текста или картинки до граница (рамки), если конечно вы будете ее делать указав border — который укажет толщину рамки (если оставить ноль, то рамки не будет) и цвет (html код, ставится после знака #. Коды цветов можно посмотреть, набрав в поиске Яндекса «Палитра цветов Яндекс»). 3) Чуть ниже предыдущего кода вставляем:
Этот блок предназначен для отображения картинка, такой, как мы будем ее видеть до наведения на нее мышкой. То есть определяем степень затемнения (или непрозрачность).
Здесь нам важна команда opacity — она и определяет затемнение. Значение можно ставить от 0.0 до 1.0. Как вы видите у меня стоит значение 0.5, то есть прозрачность составляет 50%, посмотреть, как это выглядит можете в футере. Далее переходим к четвертому пункту.
4) Вставляем третий и последний блок:
Этот блок будет определять какой станет наша картинка, когда мы наведем на нее мышкой (значение a:hover). У меня указано значение opacity:1.0, что означает — картинка будет становится полностью видимой, без затемнения.
В итоге мы получаем вот такой большой блок, его и надо вставить в файл style.css, все настройки можете поменять на свои.
Последняя наша задача, применить данный код в действии.
Заходим туда, где у вас расположен код счетчика (ну или любой другой картинки). У меня он расположен в футере, я захожу в footer.php и ищу код счетчика. Нахожу код счетчика LiveInternet.
Теперь внимание, необходимо в начале кода поставить такое <div >