Как добавить фоновый рисунок на веб-страницу?
Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background , которое в свою очередь добавляется к селектору body .
Общий синтаксис добавления фона следующий.
body Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif) .
При добавлении фоновой картинки учтите, что изображение загружается не сразу, поэтому цвет фона должен быть таким, чтобы сохранить достаточный контраст между цветом текста и фона. Лучше всего устанавливать цвет фона близким к цвету фонового рисунка, здесь опять же поможет универсальное свойство background , как показано в примере 1.
Пример 1. Добавление фона
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фон .
В данном примере фон веб-страницы задан цветом хаки, а текст — белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.
Как сделать чтобы фон был поверх картинки?
Как сделать чтобы фон был поверх картинки и был прозрачен, как на картинке ?
- Вопрос задан более трёх лет назад
- 701 просмотр
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
Вариантов много
1. Картинка — фон body
Полупрозрачный цвет — фон обертки формы или самой формы
2. Картинка и цвет — заливки одного блока, но тогда вместо просто цвета нужно использовать градиент из цвета в самого себя.
3. Картинка — фон body или обертки формы
Цвет — огромной тенью от формы
4. Картинка — фон body или обертки формы
Цвет — полупрозрачный псевдо
И различные комбо этих вариантов.
Как можно поставить картинку поверх другой? Возможно ли это сделать с помощью языка css? [закрыт]
Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.
Закрыт 3 года назад .
Я хочу поставить логотип на картинку,возможно ли это реализовать?
Отслеживать
задан 3 июн 2020 в 10:14
1 1 1 золотой знак 1 1 серебряный знак 2 2 бронзовых знака
Да. Изучите абсолютное позиционирование
3 июн 2020 в 10:17
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
div < position: relative; >.inner
Отслеживать
ответ дан 3 июн 2020 в 10:25
5,004 2 2 золотых знака 12 12 серебряных знаков 25 25 бронзовых знаков
Картинку также можно задать блоком div с background-image .
div < display: flex; align-items: flex-end; background-image: url(http://ipic.su/img/img7/fs/Screenshotfrom2020-06-0313-18-56.1591179558.png); height: 400px; >img
Выравнивать можно через флексы и относительное позиционирование, а можно через абсолютное:
div < background-image: url(https://alatvesti.ru/wp-content/uploads/2019/09/les.jpg); position: relative; height: 200px; width: 600px; >img
Как наложить background-image поверх?
Нужно чтобы это было как background-image,
также оно должно выходить за пределы других section сверху и снизу?
Как?
- Вопрос задан более трёх лет назад
- 3238 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Stalker_RED @Stalker_RED
background не может быть поверх, и не может никуда выходить. Как вариант — добавьте еще один элемент (или псевдоэлемент) и располагайте его как вам угодно.
Ответ написан более трёх лет назад
Нравится 2 2 комментария
Aleks Kirilov @anton12333 Автор вопроса
Спасибо, я вас немного не понял, объясните пожалуйста.
Stalker_RED @Stalker_RED
Aleks Kirilov, что именно объяснить? свойство background-image (фоновое изображение) не может торчать за пределы элемента и не может оказаться поверх чего-либо только если у вас несколько фонов, или если сам элемент с фоном расположен поверх других элементов.
Но вы можете создать псевдоэлемент, например, и спозиционировать его как вы хотите. В том числе за пределами родительского блока.
Нихрена не понятно из вопроса, но скорее всего вам нужно border-image.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- CSS
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- 4 часа назад
- 43 просмотра