Как сделать фон html css

Подскажите, как сделать затемнение фона? (полупрозрачным цветом)

Сейчас на многих сайтах используется такое затемнение, но я не нашел, как его сделать. Например у header есть картинка на фоне, а поверх нее текст. Но чтобы текст читался, поверх картинки накладывается полупрозрачный черный например фон. Как его сделать? Для header имеются такие свойства:

Это ответ на ваш вопрос:

Наложить полупрозрачный блок c rgba бэкграундом (где 4й параметр прозрачность) и с абсолютным позиционированием. HTML:

Добавляешь черную заливку фона и opacity: значение от 0 до 1; для этого фона . Пример: полупрозрачность opacity: 0.5;

Можно сделать с помощью псевдоэлемента. Код будет примерно такой:

например, background-color: rgba(0, 0, 0, 0.5);

Тоже понадобилось такое решение, в итоге не подходили предложения через ::after , position и z-index . В этих случаях нужно все элементы на странице поднимать на позицию выше. Через filter и opacity тоже не вариант, затемняется всё.
Решение простое.

Можете хоть зелёной сделать. И ни где ничего не надо менять.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css веб-программирование веб-дизайн или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Кликабельный фон / подложка для сайта через HTML, CSS, JS

Кликабельный фон сайта

Реализацию данной задачи вы наверняка встречали на крупных порталах, так как подобный рекламный брендинг привлекает максимум внимания посетителей и является более эффективным чем обычные баннеры. Сегодня рассмотрим как сделать фон ссылкой на сайте с помощью HTML, CSS, Javascript и некоторых других «подручных средств».

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

Кликабельная подложка для сайта через HTML и CSS

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

Визуально выглядит как-то так:

Кликабельная подложка для сайта

Важные пояснения по примеру:

  1. Во-первых, вы видите, что весь код собран в одном блоке, но вы можете разделить его на 2 части: отдельно HTML, а стили вынести во второй файл (style.css).
  2. Тег A с адресом для перехода (href) добавляется сразу после класса body. При этом в стилях у него выключается подчеркивание, ставится обычный курсор и ширина 100%. Свойство target=»_blank» откроет линк в новом окне. Не забудьте заменить URL на нужный!
  3. Адрес фонового изображения задается в свойстве CSS background для класса в BODY. Обязательно(!) поменяйте адрес картинки (ВАШ-АДРЕС-ГРАФИКИ.jpg) на свое значение.
  4. Параметр background-attachment: fixed не обязательный, он фиксирует фоновую графику при прокрутке, если вам надо. Важно, чтобы в блоке контента задавался тип позиционирования position: relative. Дабы сохранить адаптивность предлагается добавлять DIV’у вокруг основного контента margin auto.
  5. Все названия классов и блоков разрешается менять на свои, главное не забывайте делать это и в HTML, и в CSS одновременно.

Высота подложки сайта

В коде вы можете видеть заданную высоту height:1200px — следовательно HTML ссылка фона будет активна только в данном диапазоне. Это пригодится, когда рекламный брендинг должен располагаться исключительно в шапке сайта, а потом через полупрозрачный переход постепенно сливаться с обычным бекграундом (по которому кликать уже не получится).

Кликабельный фон для сайта

В принципе, значение height при желании легко перемещается из тега А в CSS.

Внимание! Если же вам надо сделать наоборот, чтобы абсолютно вся подложка была кликабельной, то, во-первых, удаляете опцию height из HTML, а во-вторых, для идентификатора #ad_bg в стилях используете:

Из новых фишек здесь: высота 100% + позиционирование блока fixed. При этом значение background-attachment для бекграунда может быть как фиксированное, так и со скроллингом.

Рандомные кликабельные фоновые картинки

Рассмотрим полезную модификацию предыдущего решения, когда нужно разместить в background несколько разных фоток, которые бы менялись случайным образом при переходах по страницам проекта. Заметьте, речь идет не о слайдшоу, а про обновление веб-страниц. Принцип реализации следующий.

В CSS-файле создаете несколько стилей с разными background:url (photo1.jpg, photo2.jpg и photo3.jpg):

Далее перед body добавляете скрипт случайной выборки параметров из массива:

<?php $banners[1] = array(‘home1′,’http://site1.com/’); $banners[2] = array(‘home2′,’http://site2.com/’); $banners[3] = array(‘home3′,’http://site3.com/’); $rnd = rand(1,3); ?> <body echo $banners[$rnd][0]; ?>"> <a style="height:1200px;" href="<?php echo $banners[$rnd][1]; ?>" target="_blank">&nbsp;</a> <div >

Суть следующая: каждый раз при генерации страницы выбирается рандомное число от 1 до 3х, а затем оно подставляются в код и указывает порядковый номер ячейки массива.

Здесь важно:

  • задать в переменной banners линки, куда пользователь будет переходить при клике на фоновое изображение (вместо site1, site2 и site3);
  • укажите правильные адреса картинок в background:url;
  • не забудьте скопировать остальную часть стилей из прошлого примера (#ad_bg, .main-content-block);
  • меняйте значение высоты подложки height:1200px, если потребуется.

Внимание! Учитывая наличие PHP функций, работать данная конструкция будет только для исполняемых файлов с расширением .php (в стандартной .html странице не запустится).

Кликабельный фон сайта с ссылкой через Javascript

Если по каким-то причинам первый способ решения задачи вам не подошел, то есть парочка на JS. Следует заметить, что в примерах ниже используются совсем другое оформление, поэтому визуальный результат тестирования у вас получится несколько иной. Однако в данном случае важным является именно Javascript, &#8212; все остальное подправите уже после его внедрения.

1. Итак, вариант1 найден здесь, он максимально компактный. Сначала добавляете HTML:

Ну, и дальше сам скрипт. Можете сделать из него отдельный JS-файл либо прописать сразу в body:

2. Исходник второго решения, к сожалению, не сохранился, остался лишь код:

Здесь для события onclick был добавлено открытие нового окна с указанным URL. Его вместе с адресом подложки под сайт следует заменить на свои. Оформление также следует подправить под себя. Оба метода тестировались, и на момент написания поста все работало.

Реализация на Вордпресс и доп.нюансы

Во-первых, пару слов следует сказать про добавление ссылки на фон в одной из самых популярных CMS систем. Всю информацию по теме найдете в статье про кликабельное фоновое изображение WordPress сайта где описано 2 метода:

  • через HTML/CSS &#8212; он совпадает с нашим примером в начале публикации;
  • с помощью соответствующих модулей.

Как оказалось, сейчас в системе нет на 100% подходящих бесплатных плагинов. Ранее в Дизайн Мании мы рассказывали о двух возможных вариантах по теме, но один из них (Background Manager) уже недоступен/удален.

Что же делать? Если у вас недостаточно навыков для написания модуля с нуля, то следует выбрать максимально подходящий по смыслу и преобразовать его под свои нужды. К сожалению, без дополнительных навыков веб-разработки просто не обойтись. Вы можете взять:

  • WP-Backgrounds Lite &#8212; выполняет установку полноэкранного кликабельного фона на страницах/постах блога. Вам придется сделать так, чтобы он реализовывал функцию и для остального веб-проекта.
  • Backdrop &#8212; его преимущество в задании всех параметров через Настройщик шаблона (находящийся в админке). Нужно добавить в исходник плагина еще одну опцию и подправить вывод результирующего HTML-кода.

Также советуем почитать статью о брендированной рекламной подложке &#8212; почему этот формат интересует рекламодателей, какие нюансы и вопросы возникают при его внедрении и т.п.

Если вы знаете еще какие-то варианты как сделать фон ссылкой, делитесь ими в комментариях.

Делаем видео-фон для блока с помощью CSS

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

Для мобильных телефонов видео будет отключено, и на фон будет установлена статичная картинка.

Мой HTML будет выглядеть так:

CSS для блока с фоновым видео:

Рабочий пример блока с видео-фоном:

See the Pen CSS video background by Denis (@deniscreative) on CodePen.0

Рекомендую к прочтению:

Комментарии (3) к “Делаем видео-фон для блока с помощью CSS”

Дмитрий

в сафари не хочет работать

КАППА

Сафари говно

Искандер

в яндексе на видео накладывается не прозрачный фон по дефолту, или я просто не нашел где это убрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *