Как сделать фон для сайта?
Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол «застелить» дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:
Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.
Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо «заточены» руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.
Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html. Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.
В качестве фона можно использовать несколько элементов:
- Цвет;
- Фоновую картинку;
- Текстурное изображение.
Разберемся с применением каждого из них подробнее.
Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style. То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега <body>. Например:
<body> <p>Фон сайта #55D52B</p> </body>
Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB. Примеры:
<body> <p>Фон сайта rgb(23,113,44)</p> </body>
<body> <p>Фон сайта green</p> </body>
Установка цвета фона с помощью ключевых слов имеет ряд ограничений по сравнению с остальными двумя способами.
В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.
Поэтому для того, чтобы установить фон для сайта html, лучше использовать шестнадцатеричный формат или RGB.
Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent, то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.
Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image.
Пример:
<body> </body>
Фоновые рисунки | htmlbook.ru
В связи с особенностями веб-страниц, фоновые рисунки приобретают значительную роль при верстке документов сайта. При этом они активно участвуют в самых разных делах, например, автоматизируют процесс присоединения рисунков к тексту, создают градиентные переходы и, конечно, добавляют фон под содержимым. Далее рассмотрены некоторые аспекты применения фоновых изображений.
Фон на веб-странице
Установка фонового рисунка на веб-страницу традиционно происходит через атрибут background тега <body>. Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому обратимся к стилям и посмотрим, что же можно делать с помощью CSS.
В CSS имеется пять атрибутов, которые управляют фоновой картинкой: ее добавлением, положением и повторением. Однако все эти параметры заменяет одно универсальное свойство background, его и будем использовать в дальнейшем.
Добавление фонового рисунка
Добавление рисунка происходит путем установки адреса картинки через ключевое слово url. Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную на рис. 1.
Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background к селектору BODY, как показано в примере 1.
Пример 1. Фоновый рисунок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
background: url(images/target.gif) no-repeat 30px 20px; /* Параметры фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>В данном примере графический рисунок target.gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.
Повторение рисунка
Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали или вертикали, доступно несколько вариантов оформления веб-страниц. Например, для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение, показанное на рис. 3.
Рис. 2. Повторение рисунка по вертикали
Рис. 3. Картинка для создания фона
Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы. В примере 2 приводится создание такого фонового рисунка, опять же с помощью свойства background и его значения repeat-y.
Пример 2. Повторение фона по вертикали
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фоновое изображение</title> <style type="text/css"> BODY { background: #fc0 url(images/hand.png) repeat-y; /* Повторение по вертикали */ } </style> </head> <body> <p>...</p> </body> </html>
Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).
Рис. 4. Использование градиента в качестве фона
Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов, а высота рисунка зависит от цели документа и предполагаемой высоты содержимого веб-страницы. Не стоит также забывать, что рисунок большого размера приведет к увеличению объема графического файла. А это отрицательно скажется на скорости его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного случая вполне подошла картинка размером 30х200 пикселов (рис. 5).
Рис. 5. Градиентное изображение для создания фона
В примере 3 показан код HTML для создания градиентного фона.
Пример 3. Повторение фона по горизонтали
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фоновое изображение</title> <style type="text/css"> BODY { background: url(images/gradient2.png) repeat-x; /* Параметры фона */ text-align: center; /* Выравнивание блока по центру */ } DIV { margin: auto; /* Отступы вокруг блока */ width: 75%; /* Ширина блока */ height: 90%; /* Высота блока */ text-align: left; /* Выравнивание текста по левому краю */ padding: 10px; /* Поля вокруг текста */ background: white; /* Цвет фона */ } </style> </head> <body> <div> Lorem ipsum... </div> </body> </html>
Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном примере добавляется слой, в котором и отображается содержимое веб-страницы.
Добавление рисунка к тексту
С помощью фонового изображения можно автоматизировать процесс добавления рисунков к определенному тексту, например, к заголовкам. Для этого используется универсальное свойство background, которое применяется к нужному селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся, аргумент no-repeat (пример 4).
Пример 4. Добавление рисунка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фоновое изображение</title> <style type="text/css"> h3 { background: url(images/book.gif) no-repeat 0 50%; /* Параметры фона */ padding-left: 20px; /* Отступ слева от текста */ } </style> </head> <body> <h3>Заголовок</h3> <p>Основной текст</p> </body> </html>
Как показано в данном примере, рисунок можно сдвигать по горизонтали и вертикали относительно своего исходного положения, по умолчанию это левый верхний угол блочного элемента. Сдвиг фона позволяет установить изображение по отношению к тексту желаемым образом. Чтобы текст не накладывался на рисунок, обязательно следует добавить свойство padding-left, за счет него текст смещается вправо на указанное расстояние. Оно в каждом случае индивидуально и обычно равно ширине рисунка плюс желаемому отступу между изображением и текстом.
как в html сделать фон картинкой
Многие начинающие верстальщики, только вникающие в суть создания сайтов, часто задаются вопросом, как в html сделать фон картинкой. И если некоторые и могут разобраться с этой задачей, то все равно возникают проблемы во время растягивания изображения на всю ширину монитора. При этом хотелось бы, чтобы сайт одинаково отображался на всех браузерах, поэтому должно выполняться требование кроссбраузерности. Можно установить фон двумя способами: с помощью HTML тегов и CSS стиля. Каждый сам для себя выбирает наиболее оптимальный вариант. Конечно, CSS стиль гораздо удобнее, ведь его код хранится в отдельном файле и не занимает лишние колонки в основных тегах сайта, но прежде рассмотрим простой метод установки изображения на фон сайта.
Основные теги HTML для создания фона
Итак, переходим к вопросу, как сделать картинку фоном в html на весь экран. Для того чтобы сайт красиво выглядел, необходимо понимать одну достаточно важную деталь: достаточно просто сделать градиентный фон или закрасить его однотонным цветом, но если вам необходимо вставить на задний план картинку, она не будет растягиваться на всю ширину монитора. Изображение изначально нужно подобрать или самостоятельно сделать дизайн с таким расширением, в котором у вас будет отображаться страница сайта. Только после того как фоновое изображение готово, переносим его в папку с названием «Images». В ней мы будем хранить все используемые картинки, анимации и другие графические файлы. Эта папка должна находиться в корневом каталоге со всеми вашими файлами html. Теперь можно переходить и к коду. Существует несколько вариантов записи кода, с помощью которого фон будет меняться на картинку.
- Написать атрибутом тега.
- Через CSS стиль в HTML коде.
- Написать CSS стиль в отдельном файле.
Как в HTML сделать фон картинкой, решать вам, но хотелось бы сказать пару слов о том, как было бы наиболее оптимально. Первый метод с помощью написания через атрибут тега уже давно устарел. Второй вариант используется в очень редких случаях, только потому что получается много одинакового кода. А третий вариант самый распространенный и эффективный. Вот HTML примеры тегов:
- Первый способ записи через атрибут тега (body) в файле index.htm. Он записывается в таком виде: (body background= «Название_папки/Название_картинки.расширение»)(/body). То есть если у нас картинка с названием «Picture» и расширением JPG, а папку мы назвали как «Images», тогда запись HTML-кода будет выглядеть так: (body background=»Images/Picture.jpg»)… (/body).
- Второй метод записи затрагивает CSS стиль, но записывается в том же файле с названием index.htm. (body).
- И третий способ записи производится в двух файлах. В документе с названием index.htm в теге (head) записывается такая строчка: (head)(link rel=»stylesheet» type=»text/css» href=»Путь_к CSS_файлу»)(/head). А в файле стилей с названием style.css уже записываем: body {background: url(Images/Picture.jpg’)}.
Как в HTML сделать фон картинкой, мы разобрали. Теперь необходимо понять, как растянуть картинку по ширине всего экрана.
Способы растягивания фоновой картинки на ширину окна
Представим наш экран в процентном виде. Получается, что вся ширина и длина экрана будет составлять 100% х 100%. Нам необходимо растянуть картинку на эту ширину. Добавим к записи изображения в файл style.css строку, которая и будет растягивать изображение на всю ширину и длину монитора. Как это записывается в CSS стиле? Все просто!
body
{
background: url(Images/Picture.jpg’)
background-size: 100%; /* такая запись подойдет для большинства современных браузеров */
}
Вот мы и разобрали, как сделать картинку фоном в html на весь экран. Есть еще способ записи в файле index.htm. Хоть этот метод и устаревший, но для новичков необходимо его знать и понимать. В теге (head)(style) div { background-size: cover; } (/style) (/head) эта запись означает, что мы выделяем специальный блок для фона, который будет позиционироваться по всей ширине окна. Мы рассмотрели 2 способа, как сделать фон сайта картинкой html, чтобы изображение растягивалось на всю ширину экрана в любом из современных браузеров.
Как сделать фиксированный фон
Если вы решили использовать картинку в качестве фона будущего веб-ресурса, тогда вам просто необходимо узнать, как его сделать неподвижным, чтобы он не растягивался в длину и не портил эстетичный вид. Достаточно просто с помощью HTML кода прописать это небольшое дополнение. Вам необходимо в файле style.css дописать одну фразу после background: url(Images/Picture.jpg’) fixed; или вместо нее добавить после точки с запятой отдельную строчку — position: fixed. Таким образом, ваш фоновый рисунок станет неподвижным. Во время прокрутки контента на сайте, вы увидите, что текстовые строки двигаются, а фон остается на месте. Вот вы и научились, как в html сделать фон картинкой, несколькими способами.
Работа с таблицей в HTML
Многие неопытные веб-разработчики, сталкиваясь с таблицами и блоками, часто не понимают, как в html сделать картинку фоном таблицы. Как и все команды HTML и CSS стиля, этот язык веб программирования достаточно простой. И решением такой задачи будет написание пары строк кода. Вы уже должны знать, что написание табличных строк и столбцов обозначается соответственно как теги (tr) и (td). Чтобы фон таблицы сделать в виде изображения, необходимо дописать к тегу (table), (tr) или (td) простую фразу с указанием ссылки на картинку: background = URL картинки. Для наглядности приведем пару примеров.
Таблицы с картинкой вместо фона: HTML примеры
Нарисуем таблицу 2х3 и сделаем ее фоном картинку, сохраненную в папке “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблица будет закрашена в фон картинки.
Теперь нарисуем эту же табличку размерами 2х3, но вставим картинку в столбики под номером 1, 4, 5 и 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5(/td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.
Кроссбраузерность сайта
Существует еще такое понятие, как кроссбраузерность веб-ресурса. Это означает, что страницы сайта будут одинаково правильно отображаться в разных типах и версиях браузеров. При этом нужно HTML код и CSS стиль подгонять под необходимые браузеры. Кроме того, в современное время развития смартфонов многие веб-разработчики стараются создать сайты, адаптированные и под мобильные версии и под компьютерный вид.
Полностью адаптивный фон с использованием CSS
Ключевая часть медиа-запроса заключена в свойстве max-width: 767px, которое, в нашем случае, означает, что если область просмотра браузера больше чем 767px — используется большое изображение.
Минус этого способа состоит в том, что, если вы изменяете размер окна браузера, с, допустим, 1200px до 640px (или наоборот), вы увидите мерцающий экран, пока меньшее или большее изображение будет подгружаться.
И вдобавок, из-за того, что некоторые мобильные устройства могут работать в большем разрешении — к примеру, iPhone 5 с Retina-дисплеем разрешением в 1136 на 640px, меньшее изображение будет выглядеть некрасиво.
Весь использованный в этом руководстве код вы можете взять с GitHub.
Если и можно что-то добавить на счет этой техники, то это следующее.
Используйте вышеописанное с осторожностью, потому как файлы большого размера могут повлиять на пользовательское взаимодействие, в особенности когда пользователь не имеет достаточно быстрого соединения с интернетом. И это еще одна причина, по которой стоит устанавливать корректный цвет фона, чтобы посетитель вашего сайта смог видеть содержимое еще до того, как фоновое изображение будет полностью загружено.
Оптимизируйте ваши картинки для Веб, прежде чем использовать.
Если вы хотите использовать код из этой статьи в своих целях — нет необходимости спрашивать, можно ли это делать; весь код размещен как общественное достояние на основе CC0 1.0 Universal.
Исходный код в репозитории GitHub repo не защищен какими либо авторскими правами. Вы можете использовать, продавать, модифицировать и распространять исходный код. Запрос на это вам не нужен.
(Владельцем фоновой картинки я не являюсь. Она принадлежит Unsplash).
Данная публикация представляет собой перевод статьи «Responsive Full Background Image Using CSS» , подготовленной дружной командой проекта Интернет-технологии.ру
телеграм канал. Подпишись, будет полезно!
html — полноэкранное фоновое изображение с рамкой
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
- Реклама Обратитесь к разработчикам и технологам со всего мира
- О компании
css — Сделать флеш фоном в html (полный экран)
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
- Реклама Обратитесь к разработчикам и технологам со всего мира
- О компании
Загрузка…
.html — изображение в полноэкранном режиме с тегом img
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
- Реклама Обратитесь к разработчикам и технологам со всего мира
- О компании
Загрузка…
Как создать полностраничное изображение героя (HTML и CSS) • Code The Web
Изображения главного героя используются веб-сайтами во всем Интернете и выглядят потрясающе. Узнайте, как создать код в этой статье…
Что мы будем делать
Вот что мы будем делать сегодня:
К сожалению, ваш браузер не поддерживает встроенные видео.
Вы можете просмотреть живую демонстрацию здесь.
Поехали!
Прежде всего, вам нужно создать новую пустую папку для этого проекта.В нем создайте два новых файла: index.html и style.css .
Создание HTML
Для начала нам нужно создать структуру документа HTML:
Мой замечательный сайт
Здравствуйте!
Не забудьте добавить в свою таблицу стилей!
На этом этапе сохранения откройте HTML-файл в браузере и убедитесь, что все работает.
HTML-код героя
Графическая часть страницы (см. Демо) называется изображением героя . Давайте добавим изображение главного героя и его содержимое в наш HTML-код:
Мой замечательный сайт
<раздел>
Вау, что здесь происходит? Давайте разберем его …
Сначала создадим
Затем мы добавляем внутренний Наконец, мы добавляем наш фактический контент — просто Как вы можете видеть из демонстрации, у нас есть фиктивный текст под героем, чтобы мы могли прокручивать.Чтобы статья оставалась по теме, мы не будем использовать это в этой статье. Итак, давайте добавим наш фиктивный текст! Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число nec nibh molestie, efficitur leo sed, viverra nunc. Donec vehicle accumsan erat facilisis ullamcorper. Donec Commodo Quis Dui Nec Placerat. Donec mi orci, scelerisque eget nisl ac, hendrerit condimentum odio. Нам dictum odio eget quam tempus, маттис одио орнаре. Nullam auctor libero ut libero suscipit, ut accumsan nunc condimentum.Donec ullamcorper maximus sapien quis egestas. Mauris viverra scelerisque lobortis. Orci varius natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Fusce ultrices enim sit amet elit tincidunt maximus. Suspendisse vitae pellentesque lectus. Duismodo leo suscipit augue mollis, non venenatis dolor ullamcorper. Duis tincidunt scelerisque lacus, vel Vehicula leo conctetur vel. Duis posuere nisl non odio consquat ultrices. Lorem ipsum dolor sit amet, conctetur adipiscing elit. Etiam a leo nec mi blandit euismod. Etiam fringilla odio vitae risus ornare, id bibendum velit conquat. Fusce posuere risus sollicitudin condimentum ultrices. Fusce gravida, Purus eget laoreet mattis, velit sapien ultrices diam, id dapibus erat leo id quam. Maecenas quis risus convallis, placerat elit non, iaculis toror. Nullam porttitor magna risus, quis bibendum metus tincidunt in. Etiam vel ligula ac risus mattis tincidunt vel sit amet ante. Morbi et viverra ligula.Ut ac dignissim nisi, condimentum imperdiet mauris. Pellentesque ut ipsum vel diam tristique faucibus eu et lectus. Maecenas posuere neque non lacus bibendum, sit amet pharetra justo semper. Sed mi risus, tempor sit amet ligula eget, varius pretium est. Sed a odio in orci accumsan pretium suscipit ut quam. Как видите, все, что мы сделали, это вставили несколько Вот и все для HTML! Перейдем к стилизации нашей страницы… На данный момент ваш веб-сайт будет выглядеть примерно так: Это совсем не похоже на то, что мы хотели — давайте добавим немного стиля! Мы начнем с размещения текста и настройки размера… Прежде всего, давайте откроем наш файл Тело имеет поле по умолчанию, которое мы не хотим вмешиваться без заголовка изображения, поэтому мы установили его на 0.Причина, по которой мы установили семейство шрифтов . Фактически вы можете установить любой шрифт, который хотите, но он будет немного сложнее — я расскажу об этом в следующей статье. Давайте определим расположение и размер наших элементов, чтобы мы знали, где все будет на странице. Прежде всего, мы хотим стилизовать сам раздел героев: Если вы еще не знаете, Сохраните и перезагрузите браузер — теперь раздел героев занимает весь экран! (вам нужно прокрутить вниз, чтобы увидеть остальную часть страницы) Мы хотим, чтобы наш текст располагался по центру по горизонтали и по вертикали в нашем разделе героев, чтобы он отображался в середине экрана.Лучший способ сделать это — использовать флексбоксы (я немного написал об идеальном центрировании с помощью флексбоксов в секции идеального центрирования). Итак, давайте добавим нашему герою идеальную центровку! Теперь при сохранении перезагрузите страницу, текст будет по центру экрана! … или нет. Видите ли, нам также нужно убедиться, что наш фактический текст центрирован, а не только элементы, в которых находится текст.Мы можем сделать это просто, используя Поехали! Контент нашего героя теперь идеально центрирован! Теперь давайте увеличим наш основной заголовок, чтобы мы знали, что это заголовок: Результат: Однако теперь между нашим заголовком и подзаголовком появился необычно большой промежуток.Это связано с тем, что по умолчанию для элементов заголовка по мере увеличения размера шрифта Теперь выглядит немного лучше! Теперь, когда заголовок и подзаголовок выглядят хорошо, давайте стилизуем нашу кнопку! Прежде всего, нам нужно присвоить кнопке вид Результат: Давайте добавим немного полей Однако наша кнопка все еще не по центру! Это потому, что он имеет фиксированную ширину в отличие от других элементов гибкого бокса.К счастью, исправить это довольно просто — мы просто добавляем Давайте попробуем: Результат: Затем давайте добавим немного стиля к тексту нашей кнопки, чтобы переопределить стили ссылок по умолчанию, а также увеличить текст.Это одно из важных правил веб-дизайна: человек с большей вероятностью нажмет на более крупные объекты . В этом случае мы хотим, чтобы люди нажимали на нашу кнопку (призыв к действию), поэтому мы увеличим текст. Итак, давайте добавим CSS: Результат: Все, что осталось, это скруглить края кнопки — мы можем сделать это с помощью свойства Woo! После всего этого, наконец, пришло время добавить наш настоящий образ к нашему герою! Я быстро рассмотрю, что делает каждый из них: Устанавливает фоновое изображение нашего героя на это изображение Убедитесь, что наш фон достаточно велик, чтобы покрыть всего героя. Располагает изображение так, чтобы оно находилось в центре экрана. Останавливает изображение от повторения / мозаики. Сохраняет фоновое изображение на одном месте даже при прокрутке страницы вниз. Сохраните, перезагрузите и посмотрите на результат: К сожалению, ваш браузер не поддерживает встроенные видео. Отлично! Однако сейчас текст очень сложно увидеть. Что, если мы попробуем сделать все белым? Вы должны были изменить две строки и добавить одну (см. Выше). А теперь посмотрим на результат: Хм, все равно не работает. Однако, если мы затемним фоновое изображение, это может быть! Но как нам это сделать? Я скажу вам кое-что интересное — хотите верьте, хотите нет, у вас может быть несколько фоновых изображений для одного и того же элемента! Все, что вам нужно сделать, это разделить их запятыми.Итак, если у нас есть фоновое изображение для нашей фотографии, а затем сверху полупрозрачное черное фоновое изображение, мы сможем видеть сквозь него, но оно будет затемнено. Дело в том, что Эта концепция может быть немного запутанной для понимания, но думайте о ней, как если бы градиент наверху был похож на линзу солнцезащитных очков — он находится между вами и видом и затемняет его. Если вам нужна дополнительная помощь, я буду рад в комментариях. В любом случае, давайте посмотрим на наш сайт — сохраните и перезагрузите страницу: Ура! Текст наконец-то стал читаемым! И еще кое-что — чтобы наша кнопка выделялась на фоне фонового изображения, давайте присвоим ей собственный цвет фона Результат: Отлично, у вас получилось! Теперь ваш веб-сайт должен выглядеть так же, как демо — поздравляю 😀 — Надеюсь, это не было слишком сбивает с толку 😜 Как всегда, если вам нужна помощь или у вас есть отзывы, просто скажите об этом в комментариях ниже, и я получу назад к вам! Если вы нашли эту статью полезной, мне бы очень понравилось, если бы вы поделились ею или подписались на информационный бюллетень, чтобы получать новые сообщения в свой почтовый ящик.Если вы сделаете одно / обе эти вещи, вы официально классный и заслуживаете тако 🌮 🌮 🚀 Хорошо! Удачи, продолжайте кодировать, и я увижу вас в следующий раз, где я расскажу о том, как создать и стилизовать панель навигации с помощью HTML и CSS. Увидимся тогда!
<раздел>
). Основное содержимое HTML-код
CSS!
Стиль тела
style.css и применим общий стиль к телу:
body {
маржа: 0;
семейство шрифтов: без засечек;
}
на без засечек , заключается в том, чтобы вы не застряли в Times New Roman 😜 Расположение и размер героя
.hero {
ширина: 100ввт;
высота: 100vh;
}
vw и vh обозначают процент ширины и высоты области просмотра. В этом случае мы устанавливаем для нашего героя 100% ширины и высоты браузера.
.hero {
ширина: 100ввт;
высота: 100vh;
дисплей: гибкий;
justify-content: center;
align-items: center;
}
text-align: center :
.hero {
ширина: 100ввт;
высота: 100vh;
дисплей: гибкий;
justify-content: center;
align-items: center;
выравнивание текста: центр;
}
Стиль текста
.hero h2 {
размер шрифта: 5em;
}
увеличиваются и его поля. Итак, давайте немного подправим их:
.hero h2 {
размер шрифта: 5em;
margin-top: 0;
нижнее поле: 0,5em;
}
Стиль кнопок
display типа block (элементы по умолчанию inline ), чтобы она вела себя как другие элементы.Нам также нужно присвоить ему ширину — в противном случае он займет всю ширину экрана. Чтобы наглядно представить, что происходит, давайте также добавим границу:
.hero .btn {
дисплей: блок;
ширина: 200 пикселей;
граница: сплошной черный цвет 3px;
}
и отступов , чтобы кнопка выглядела лучше:
.hero .btn {
дисплей: блок;
ширина: 200 пикселей;
отступ: 1em;
маржа сверху: 50 пикселей;
граница: сплошной черный цвет 3px;
}
margin-left и margin-right из auto ! Это работает, потому что auto занимает максимальное доступное пространство, а это означает, что с обеих сторон есть равные поля.
.hero .btn {
дисплей: блок;
ширина: 200 пикселей;
отступ: 1em;
маржа сверху: 50 пикселей;
маржа слева: авто;
маржа-право: авто;
граница: сплошной черный цвет 3px;
}
.hero .btn {
дисплей: блок;
ширина: 200 пикселей;
отступ: 1em;
маржа сверху: 50 пикселей;
маржа слева: авто;
маржа-право: авто;
черный цвет;
текстовое оформление: нет;
размер шрифта: 1.5em;
граница: сплошной черный цвет 3px;
}
border-radius :
.hero .btn {
дисплей: блок;
ширина: 200 пикселей;
отступ: 1em;
маржа сверху: 50 пикселей;
маржа слева: авто;
маржа-право: авто;
черный цвет;
текстовое оформление: нет;
размер шрифта: 1.5em;
граница: сплошной черный цвет 3px;
радиус границы: 20 пикселей;
}
Стиль фона героя
Мы можем сделать это с помощью свойства background-image , а также некоторых других свойств, связанных с фоном:
.hero {
ширина: 100ввт;
высота: 100vh;
дисплей: гибкий;
justify-content: center;
align-items: center;
выравнивание текста: центр;
background-image: url (https://codetheweb.blog/assets/img/posts/full-image-hero/image.jpg);
размер фона: обложка;
background-position: center center;
фон-повтор: без повторения;
прикрепление фона: исправлено;
}
background-image: url ('https: // codetheweb.blog / assets / img / posts / full-image-hero / image.jpg ');
background-size: cover;
фоновое положение: центр центр;
фон-повтор: без повтора;
фон-приставка: фиксированная;
Вот строки нашего файла CSS, которые нужно добавить / изменить:
body {
маржа: 0;
семейство шрифтов: без засечек;
}
.hero {
ширина: 100ввт;
высота: 100vh;
дисплей: гибкий;
justify-content: center;
align-items: center;
выравнивание текста: центр;
цвет белый;
фоновое изображение: url ('https://codetheweb.blog/assets/img/posts/full-image-hero/image.jpg');
размер фона: обложка;
background-position: center center;
фон-повтор: без повторения;
прикрепление фона: исправлено;
}
.hero h2 {
размер шрифта: 5em;
margin-top: 0;
нижнее поле: 0.5em;
}
.hero .btn {
дисплей: блок;
ширина: 200 пикселей;
отступ: 1em;
маржа сверху: 50 пикселей;
маржа слева: авто;
маржа-право: авто;
цвет белый;
текстовое оформление: нет;
размер шрифта: 1.5em;
граница: сплошной белый цвет 3px;
радиус границы: 20 пикселей;
}
background-image не берет цветов. Но для этого нужны градиенты! Итак, мы можем создать градиент между двумя одинаковыми цветами и эффективно использовать «цвет» в качестве фонового изображения . Вот код CSS:
.hero {
ширина: 100ввт;
высота: 100vh;
дисплей: гибкий;
justify-content: center;
align-items: center;
выравнивание текста: центр;
цвет белый;
фоновое изображение: линейный градиент (rgba (0, 0, 0, 0.5), rgba (0, 0, 0, 0.5)), url ('https://codetheweb.blog/assets/img/posts/full-image-hero/image.jpg');
размер фона: обложка;
background-position: center center;
фон-повтор: без повторения;
прикрепление фона: исправлено;
}
!
.hero .btn {
дисплей: блок;
ширина: 200 пикселей;
отступ: 1em;
маржа сверху: 50 пикселей;
маржа слева: авто;
маржа-право: авто;
цвет белый;
текстовое оформление: нет;
размер шрифта: 1.5em;
граница: сплошной белый цвет 3px;
радиус границы: 20 пикселей;
цвет фона: rgba (147, 112, 219, 0.8);
}
Заключение
