Как вставить background-image с помощью CSS?
Эта статья для авторов, которые хотят выйти за рамки базовых возможностей программы Dr.Explain и использовать всю мощь CSS для оформления проекта. Отображение изображений с помощью свойства background-image поможет авторам создать уникальный и запоминающийся дизайн, а также повысит наглядность инструкций.
Свойство CSS background-image устанавливает фоновое изображение для веб-элемента. В отличие от HTML-тега img оно предлагает более широкие возможности для управления стилями, например, задание нескольких фоновых изображений, удобное масштабирование, повтор и позиционирование, наложение эффектов. Преимущества background-image проявляются именно в сценариях, где нужно не просто показать картинку, а управлять ей как частью дизайна.
|
Ниже представлен пример изображения с градиентом и текстом при помощи свойства background-image без применения графических редакторов:
Для реализации такого оформления нужно добавить на страницу соответствующий код. Сделать это можно одним из трех способов:
-
нажмите кнопку HTML в панели инструментов:
-
нажмите кнопку выпадающего списка рядом с иконкой Вставить переменную и выберите пункт HTML:
-
нажмите сочетание клавиш Ctrl+Shift+S.
После этого вставьте код в появившемся диалоговом окне HTML-фрагмент:
Код:
<style>
.combined-background {
width: 100%;
max-width: 100%;
height: 450px;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5)), url('https://images.unsplash.com/photo-1593106410288-caf65eca7c9d');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2rem; box-sizing:
border-box;
text-align: center;
}
.combined-background .top-text {
color: #5f5c5c;
font-size: 1.5rem;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.combined-background .bottom-text {
color: white;
font-size: 1.5rem;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
</style>
<div class="combined-background">
<p class="top-text">ООО "Вектор"</p>
<p class="bottom-text">Руководство пользователя</p>
</div>
Где https://images.unsplash.com/photo-1593106410288-caf65eca7c9d — путь к изображению на сервисе Unsplash, который предоставил этот файл. В вашем случае имеет смысл скачать и сохранить изображение на собственном сервере, чтобы доступ к изображению был гарантирован. Например, вы можете сохранить скачанный файл в созданной для этого папке img. Тогда путь к изображению будет выглядеть примерно так:
https://ваш_ресурс.ru/img/photo-1593106410288-caf65eca7c9d
Нажмите OK, чтобы сохранить изменения и закройте диалоговое окно.
После этого в окне редактора появится значок 
.
.Для проверки отображения кода перейдите на вкладку Просмотр HTML. Код, использованный в этом примере, отобразится следующим образом:
Чтобы отредактировать HTML-код, сделайте двойной щелчок значка или нажмите его правой клавишей мыши и в появившемся контекстном меню выберите пункт Свойства фрагмента HTML:
или нажмите его правой клавишей мыши и в появившемся контекстном меню выберите пункт Свойства фрагмента HTML:
Завершив редактирование, нажмите OK и проверьте результат.
Часто задаваемые вопросы
Можно ли использовать в Dr.Explain код JavaScript?
Можно.
Как изменить дизайн пользовательской документации в Dr.Explain?
О том, как настроить тему пользовательской документации, вы можете узнать в соответствующем видео на нашем YouTube-канале.
Можно ли использовать иконки из внешних ресурсов?
Можно. Например, вы можете подключить библиотеку Font Awesome. О том, как добавить иконку из сторонней библиотеки, мы рассказали в специальном разделе.
Можно ли использовать шрифты сторонних сервисов?
Можно. Например, вы можете подключить шрифты сервиса Google Fonts. О том, как использовать сторонний шрифт, мы рассказали в соответствующем разделе.
Шаблоны онлайн документаций адаптивны?
Все шаблоны онлайн документаций Dr.Explain имеют адаптивный дизайн.
Есть ли в Dr.Explain инструмент проверки?
Есть. Он проверяет файлы проекта на наличие ошибок. Подробнее об этом читайте в разделе Инструмент проверки.
Как изменить внешний вид ссылок онлайн документации?
Подробнее об этом читайте в соответствующем разделе Как стилизовать ссылки онлайн документации?