Как сделать затемнение фона css
Как сделать затемнение фона через 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 ):
Добрый вечер, Михаил. Я скопировала код, но появилась только таблица, без всякого затемнения. Почему?
Попробуйте в других браузерах, если не получится, значит, как-то не так подключили стили.
Михаил, добрый день. Я новичок, и учусь писать ХТМЛ странички. Есть такой вот код, наверное он даже вашего производства: Всплывающая Подсказка
Блог Vaden Pro
CSS прозрачность и особенности применения
В статье описывается особенность применения свойства, которое определяет прозрачность элементов на странице. Тут рассказывается о потенциальных проблемах и способах их решения.
В настоящее время все чаще на сайтах можно встретить применение эффекта полупрозрачности элементов. Позволяет просвечивать один элемент так, чтобы можно было увидеть задний фон. В умелых руках дизайнера это становится эффектным приемом. Ниже представлен пример такого решения, когда цветной фон наложен на картинку:
Теория и практика
Реализуется данный подход с помощью свойства opacity. Предлагаю рассмотреть реальный практический пример и, отталкиваясь от него, будем изучать работу данного свойства.
В браузере будет примерно такая картинка:
Попрактиковались? Теперь подойдем ближе к теоретической стороне рассматриваемого вопроса.
Свойство opacity, которое отвечает за эффект CSS прозрачности, было создано на основе спецификации CSS3. В его значении указывается степень непрозрачности элемента в десятичных долях. Говоря более понятным языком, запись значения 0.9 для изучаемого свойства в нашем примере означает, что элемент, которому присвоено свойство, не прозрачен на 90%. Соответственно, если будет указан в значении 0, то наш блок станет полностью прозрачным и не будет заметен. Не смотря на это, он не исчезает со страницы, так как остается зарезервированное место для него среди элементов.
Главная проблема в использовании этого свойства заключается в показателе его кроссбраузерности. Так как свойство считается относительно молодым, то старые версии некоторых браузеров могут конфликтовать с ним. Чтобы этого избежать, нужно воспользоваться следующими свойствами и скриптом:
К нежелательным эффектам использования этих вспомогательных свойств относится их неспособность пройти проверку на валидацию. Кстати само свойство opacity без проблем проходит проверку только в CSS Level 3 (так как свойство было включено именно в эту спецификацию).
Чуть не забыл отметить еще один каприз его величества Internet Explorer. В некоторых версиях может не пройти прозрачность, если не указаны ширина и высота контейнера. Но паниковать еще рано, так как этот баг легко можно исправить с помощью такой записи:
Это свойство должно относиться к стилю просвечиваемого блока.
На заметку
При назначении родительскому блоку прозрачности все его дочерние элементы становится тоже полупрозрачными, что приводит к ухудшению читабельности текста этого контейнера. Чтобы избежать этого нежелательного эффекта требуется просвечивать только фон. Для этого создается отдельный контейнер для фона, и отдельный – для контента. Не забываем установить уровень наложения контента с помощью свойства z-index, в противном случае требуемый эффект достигнут не будет.
Вот так будет выглядеть наше решение в браузере
Стоит отметить, что прозрачность была увеличена специально, чтобы подчеркнуть тот факт, что контент не подсвечивается.
Затемнение фона
Иногда дизайнер требует затемнить фон страницы. Данная задача абсолютно аналогична предыдущему случаю. Для ее реализации просто необходимо взять черный фон и слегка его осветлить.
Не вижу смысла нагружать Вас новым кодом и предлагаю работать с предыдущим. В прошлой записи меняем только цвет фона с синего на черный и цвет шрифта на красный, чтобы сохранялся контраст. Да, еще думаю, для более эффективного затемнения повысим уровень непрозрачности до 0.7. Теперь, чтобы создать эффект затемнения, контейнер с черным фоном должен накладываться на контент, что также достигается через z-index.
Наш предыдущий код принимает вид (HTML оставляем без изменений):
CSS и множественный фон
CSS-свойство background — это одно из самых часто используемых свойств. Но сообщество веб-разработчиков пока не слишком хорошо осведомлено о возможностях, которые даёт использование множественного фона. Здесь я собираюсь серьёзно поговорить о том, что может дать применение множественного фона, и о том, как использовать стандартные механизмы CSS на полную мощность.
Если вы не знакомы с CSS-свойством background — хорошо будет, если вы, перед чтением материала, заглянете на эту страницу документации MDN, посвящённую данному свойству.
Введение
CSS-свойство background — это сокращённое свойство, которое позволяет настраивать следующие обычные свойства элементов:
Рассмотрим следующий пример:
Путь к изображению, его позиция и его размер
Позиция фонового изображения
Конструкции вида top left и left top равнозначны
Размер фонового изображения
Сначала идёт ширина, а потом — высота
Тут, кстати, нелишним будет упомянуть о том, что в спецификации CSS по этому поводу сказано следующее: «Если указано лишь одно значение, то предполагается, что второе значение — это auto». Но этот механизм в браузерах не реализован, хотя в будущем ситуация может измениться. Благодарю Илью Стрельцына за то, что привлёк моё внимание к этой детали.
Одно значение задаёт и ширину, и высоту
Множественный фон
В свойстве background может быть описан один слой фона, до сих пор мы видели именно такие описания, или — несколько слоёв, свойства которых разделены запятой. Если размеры нескольких фоновых изображений одинаковы, одно из них полностью перекроет другие.
Использование нескольких фоновых изображений
На вышеприведённом рисунке у элемента есть два слоя фоновых изображений. Каждое из этих изображений позиционировано по-своему. Это — простейший пример использования множественного фона. А теперь давайте рассмотрим более продвинутый пример.
Порядок наложения фоновых изображений друг на друга
При оснащении элемента несколькими фоновыми изображения, в том случае, если одно из них занимает всю ширину и высоту родительского элемента, важное значение приобретает порядок наложения фонов друг на друга. Принять решение о том, в каком порядке фоны должны накладываться друг на друга, может быть не особенно просто. Рассмотрим следующий пример.
Здесь у нас имеется изображение стола ( table.jpg ) и изображение тарелки ( konafa.svg ). Как вы думаете, какое из этих фоновых изображений будет выведено первым? Изображение стола или изображение тарелки?
Элемент с двумя фоновыми изображениями
Правильный ответ на этот вопрос заключается в том, что первым будет изображение стола. В CSS фон, описанный первым, накладывается на второй фон, второй фон накладывается на третий и так далее. Изменение порядка описания фонов влияет на их вывод в элементе.
Первый фон накладывается на второй
Как видите, фон, заданный первым, находится выше фона, заданного вторым.
Сплошные цвета
Предположим, нам, используя CSS-инструменты настройки фона элемента, нужно сформировать одноцветный фон. Как это сделать? Это, благодаря CSS-градиентам, совсем несложная задача. Дело в том, что если воспользоваться функцией linear-gradient с одинаковыми стоп-цветами, это приведёт к появлению сплошного цвета.
Фон, созданный с помощью linear-gradient и одинаковых стоп-цветов
Тут мы привели простейший пример использования градиента при настройке фона, но градиенты, на самом деле, можно использовать для создания очень интересных и полезных эффектов.
Сценарии использования и практические примеры
▍Затемнение фонового изображения
Часто, ради облегчения чтения текста верхнего раздела страницы, фоновое изображение этого раздела нужно затемнить. Это несложно сделать, воспользовавшись двумя фоновыми изображениями.
Затемнённое фоновое изображение
Ещё интереснее то, что тот же метод можно использовать для тонирования фонового изображения элементов.
▍Рисование средствами CSS
Давайте разберём это изображение и подумаем о том, какие градиенты нам понадобятся.
Пластиковая рамка дисплея, LCD-дисплей, отражение, скруглённые края корпуса, корпус
Обратите внимание на то, что когда ноутбук «разобран», гораздо легче разобраться в том, какие градиенты нужны для того чтобы его нарисовать с использованием техники применения нескольких фоновых изображений. Возможно, вы заметили то, что я использовал пару окружностей, играющих роль скруглённых углов корпуса ноутбука. Дело в том, что стандартного способа создания градиентов со скруглёнными углами не существует.
Теперь займёмся рисованием. Для начала определим каждый из градиентов в виде CSS-переменной и укажем размер соответствующих элементов. Мне нравится использовать CSS-переменные из-за того, что это может уменьшить сложность кода, делает код чище и облегчает его восприятие. После того, как градиенты описаны, можно переходить к их позиционированию.
Итак, градиенты мы описали и задали их размеры. Теперь поразмышляем над их позиционированием. Решение этой задачи облегчит схематичное изображение ноутбука, приведённое ниже.
Схематичное изображение ноутбука
Реализация отражения света от рамки дисплея ноутбука
Как уже было сказано, слой фона, который должен располагаться над всеми остальными слоями, должен быть определён первым. В нашем случае первым градиентом будет тот, который имитирует отражение света от рамки дисплея ноутбука.
Отражение света от рамки дисплея ноутбука
LCD-дисплей
Дисплей ноутбука выровнен по центру оси X, а по оси Y он расположен со сдвигом в 6 пикселей от начала координат.
Рамка дисплея
Рамка находится ниже дисплея, она центрирована по оси X, по оси Y она расположена со смещением в 0px от начала координат.
Корпус ноутбука
А это — самый интересный элемент. Для начала, надо учесть то, что элемент, представляющий корпус ноутбука, является прямоугольником, и то, что корпус имеет скруглённые края. Это достигается благодаря использованию пары окружностей.
Готовый рисунок
Вот CodePen-проект, с которым вы можете поэкспериментировать.
▍Смешивание нескольких фонов
Возможность использования различных режимов смешивания фонов, накладываемых друг на друга, открывает широкий простор для достижения различных эффектов. Простейший способ использования этого приёма заключается в обесцвечивании изображений. Представим, что в CSS имеется цветное фоновое изображение, которое нужно обесцветить, сделать чёрно-белым.
Цветное изображение и вспомогательный слой чёрного цвета
Пользуетесь ли вы множественными фонами в CSS?
Как сделать фон в CSS
По умолчанию все браузеры отображают на страницах фон белого цвета. В арсенале вебмастера есть несколько десятков CSS правил для разнообразного оформления фонов.
Фон можно задать как для всей страницы (body), так и для отдельного элемента страницы. Давайте создадим блок и будем задавать ему разные варианты внешнего вида фона, добавляя к селектору bg_example разные CSS свойства.
.bg_example <
width: 400px;
height: 300px;
>
Это важно! Я не буду перечислять все возможные варианты записи CSS правил, а используемые верстальщиками в рабочих проектах (сокращенная запись).
Цвет фона в СSS
Цвет фона задается в виде шестнадцатеричного кода.
Как сделать картинку фоном
В веб-дизайне существует три подхода с картинками:
размноженная маленькая текстурная картинка
По умолчанию браузеры размножают картинку в блоке столько раз, сколько раз она поместиться в отведенном пространстве. Однако применять такой вариант фона нужно очень аккуратно. Ведь на таком пестром фоне текст очень трудно читать. Все мы ещё помним на заре интернета, размалеванные странички на халявных хостингах.
картинка фоном без повтора
background: url(icon.png) no-repeat;
no-repeat – без повтора
Классический пример – это иконка. Ничто не мешает вставить иконку на сайт тегом img, но по правилам SEO, так делать не нужно. Существует четкое разделение между контентом и дизайном. Так вот иконка – это украшательство и вставляется на сайт фоном. Изображения в галереях, каруселях, статьях, портфолио – это все контент.
растянутая картинка на всю секцию или экран
background: url(bg_full.jpg) no-repeat cover;
Полупрозрачный фон на CSS
Эффект с полупрозрачным фоном чаще всего используют для затемнения фона. Поверх блока с фоновой картинки накладывается другой блок или псевдоэлемент с фоном темного цвета. Так, чтобы можно было увидеть, что находится под ним. Цвет задается в формате rgba, где последним параметром пишут значение прозрачности от 0 до 1.
background: rgba(0, 0, 0, 0.5);
Градиент фона в CSS
Элементы с фоновыми градиентами смотрятся симпатичнее, чем одноцветные. Мы создали линейный градиент с переходом от светло-розового цвета к розовому цвету и от правого верхнего угла к нижнему левому.
background: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
Размытый фон
Эффект размытого фона хорошо виден на фотографии. Для наглядности размоем не весь фон, а какую-нибудь область на нем. Размывать будем CSS фильтром blur и SVG фильтром feGaussianBlur, для лучшей кроссбраузерности. Однако для IE эта комбинация все равно не работает.
bg-image <
background: url(‘kabachok.jpg’) no-repeat fixed center / cover;
position: relative;
>br
.block <
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: inherit;
filter: blur(10px);
filter: url(#blur);
>
Заключение
Эта статья не претендует на полное освещение всех возможных вариантов с фонами посредством CSS. Здесь мы разобрали самые распространенные виды фонов, которые встречаются на сайтах.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.