Как сделать фон в html: Как добавить фоновый рисунок на веб-страницу?

с помощью html и css

Здравствуй, мой читатель!

Красивый ковёр способен украсить любую, даже самую невзрачную комнату. Ваш веб-ресурс – та же комната. Если вы сделаете интересное оформление, то сможете привлечь большое количество посетителей. Сегодня я расскажу вам, как сделать фон на сайте.

По своему опыту могу сказать, что дизайн иногда  надоедает. Хочется чего-то нового и интересного. Проще всего обновить старый шаблон – изменить цвет оформления веб-ресурса.

Поменять дизайн можно с помощью html либо CSS. Кто не знает, это базовые языки разметки и стилей, с их помощью разрабатываются веб-страницы сайтов.

HTML (HyperText Markup Language) в дословном переводе означает “язык разметки гипертекста”, все его команды интерпретируются браузерами и отображаются на экране в удобной для пользователя форме.

CSS (Cascading Style Sheets — каскадные таблицы стилей) представляет собой формальный язык, которым описывается внешнее оформление документа, написанного с использованием языка разметки. В основном он используется для описания и оформления внешнего вида интернет-страниц, которые были написаны с помощью языка HTML.

Между двумя языками много общего, а именно схожие названия команд и методика использования. Но html — это строительный материал для веб-ресурса, а CSS — его облицовка.

Фон в html

В качестве фона в html могут применяться следующие элементы:

• Цвет;
• Фоновое изображение;
• Текстурная картинка;

Теперь о каждом из этих элементов поговорим подробнее.

Цвет

Для установки цвета заднего фона нужно использовать свойство под названием background-color тега style.

В Нtml цвет можно задавать:

1. В виде 3-х пар 16-тиричных цифр, каждая из которых отвечает за свой цветовой компонент (красный, зелёный, синий). Чтобы было понятнее, вспомните детство: это как смешивание цветов акварельных красок, например, синий + желтый = зеленый, и в зависимости от количества каждого получается новый оттенок. Так вот 16-тиричные цифры и определяют количество каждого цвета.
2. Ключевыми словами (green, yellow и т.д.). В этом случае рекомендую использовать только основные цвета, так как название оттенков браузер может не распознать.
3. В виде rgb (*,*,*), где снежинка — это число от 0 до 255. Также как и в первом случае задается количество определенного цвета (red, green, blue) для получения нужного результата.
4. В последнее время стал возможен и вариант rgba (*,*,*,*), где первые цифры, как и в предыдущем случае, — это количество того или иного цвета, а последняя — уровень непрозрачности, который определяется числом от 0 до 1.

Чтобы получился прозрачный фон, надо задать свойству background-color значение transparent.

Фоновая картинка

А теперь посмотрим, какие возможности открывает язык гипертекста для установки фоновой картинки. Осуществить задуманное можно при помощи свойства background-image.

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

Как же это сделать, если рисунок не резиновый? А очень просто! Запретите клонирование с помощью background-repeat. Допустимые значения для этого свойства:

1. запрет повторений — no-repeat;
2. по обеим осям – repeat;
3. по вертикали — repeat-y;
4. повторение фоновой картинки по горизонтали — repeat-x.

Как вы догадались, вам важен первый вариант.

Конечно, лучше, чтобы рисунок находился посередине. Именно для этого и существует такое свойство, как background-position. Координаты вы можете задать следующими способами:

• В пикселях;
• Ключевым словом.

В некоторых случаях во время прокрутки страницы требуется фиксированное положение изображения. Фиксированный фон веб-ресурса поможет создать свойство background-attachment. Он принимает значения fixed или scroll. Для фиксации рисунка используйте первое значение.

Текстурный фон

Изображения, выполненные в высоком качестве, влияют на скорость загрузки веб-ресурса. Но на компьютере в случае высокоскоростного онлайн-соединения это не так заметно пользователю, как на мобильных устройствах, где такие странички будут загружаться довольно долго.

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

Средства CSS

Выше описанные свойства вполне подходят и для стилевых каскадных таблиц (CSS). Для создания дизайна веб-ресурса с помощью CSS достаточно использовать команды тех примеров, что я приводил выше. Результат будет тот же.

С помощью CSS можно создать адаптивный задний фон, который корректно будет отображаться на любых устройствах с разным расширением экрана.

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

Для css стилей обычно создается отдельный файл. Этот вариант удобен, так как вам не придется постоянно прописывать стили в каждом html документе.

Теперь вы знаете, как следует менять фон. Создайте свой «ковёр», расстелите его на своём сайте, наслаждайтесь его красотой и радуйте посетителей! Расскажите в социальных сетях знакомым и друзьям о том, чему вы научились благодаря этой статье. Подписывайтесь на обновления, следите за новыми редакциями, до скорых встреч!

C уважением! Абдуллин Руслан

Понравился блог? Подпишись, чтобы получать новые статьи на почту и быть в курсе всех событий!

Как сделать фон в HTML пошаговая инструкция

Как сделать фон в HTML? Для создания сайта, немаловажным вопросом является то, как сделать фон в html. Такая процедура подразумевает использование определённых тегов – кодовых слов и букв. Благодаря ним, можно поставить различный фон, сделать его однотонным – залить, или поставить на место фона любую картинку.

Такие действия очень пригодятся всем верстальщикам, и тем, кто решил самостоятельно «приодеть» свой сайт. Читайте еще: Как делать инфографику.

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

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

Поэтому в качестве картинки для фона лучше всего использовать Паттерн.

Паттерн — это небольшая картинка, не имеющая швов, которая при повторении образует большой фон, заполняющий все пространство сайта.

Чтобы сделать фон (паттерн) существует огромное число способов. Например, вы можете открыть любой поисковик и вбить в строку поиска запрос «Скачать фон для сайта», а потом долго просматривать различные сайты в надежде отыскать подходящий паттерн.

Но как сделать фон приложив минимум усилий? Предлагаю обратить внимание на подборку онлайн сервисов, которые в своей базе имеет сотни уже готовых фонов, их останется только отредактировать и настроить по своему вкусу.

1) PatternCooler

Один из самых крупных хранилищ подборки фонов. Здесь вы сможете отыскать паттерн различной фактуры, сами изменить параметры цвета, а также выбрать популярный из топ.

2) Stripegenerator

Тоже неплохой онлайн генератор фонов. Есть небольшой ряд настроек и немаленькая база заготовок.

3) BgPatterns

Очень интересный сервис по созданию онлайн фона. Вы можете выбрать различные рисунки (сердечки, звездочки, кружочки) и цветовую гамму создаваемого фона.

4) Tartanmaker

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

Как сделать фон в виде цвета или картинки?

Здесь вы самостоятельно задаете фон блока, где аналогично можно для всей страницы, где задействуем различные варианты:

• Создать фон с помощью цвета;
• Здесь также можно задействовать картинку или изображение;
• Или создать плавный переход палитры, при помощи градиента, где фон получится оригинальным;
• Также есть возможность задействовать сразу несколько вариаций, это картинка, и к ней идет цвет или несколько изображений;
• Здесь нужно понимать, что HTML не сильно связан с визуальным оформлением страницы, где только можно выставить цветовой фон, но и снимок. Но вот если использовать другие вариаций по установки, то здесь безусловно не обойтись без стилистики CSS.
• Для выставление фона в html, то здесь можно задействовать сразу несколько атрибутов bgcolorи background.
• Также, чтоб создать в формате HTML и сделать фон, который будет виде оттенка цвета, то для этого просто дописываем следующий атрибут bgcolor.

Также нужно знать: 

Как уже говорили, что фон все же лучше выводить через стили CSS, но здесь не нужно в обязательном порядке задавать для этого элемента класс и дописывать в стилях CSS.

Так как есть возможность воспользоваться атрибутом style, который можно задать прямо в HTML.

Здесь нужно изначально понимать, что этот способ не срабатывает на многих тегов, все дело в современном или обновленном браузере, так как у кого то может показывать не корректно. Для кого то покажется не так удобным, где лучше перейти и эффективному использованию на CSS.

Как самостоятельно сделать фон в CSS?

Как упоминалось выше в описание, что для выставление фона, где можно задать по разным вариантам, но главное, для всех им нужно свойство background, где значение могут быть разнообразными.

Вот как использовать это значение, разберем подробнее.

Первое, что делаем, это в HTML нужно сразу присвоить элемент, он понадобится для вывода палитры цвета на определенном классе или задействовать атрибут style. По мне, то больше нравится все выводить через заданный тобой класс, ходя оба варианта отлично работают.

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

Создаем фон в виде цвета в CSS

Здесь аналогично используем несколько форматов, чтоб вывести цветовой фон.

Чтоб поставить уровень прозрачности, то он идет в десятичном значении от 0 до 1, где 0 – полностью это полностью прозрачен, с 1 – уже появляется оттенок.

Как создать фон в виде градиента?

Один из многих вариантов, который больше нравится, так как игра с палитрой отличный вариант для редактирование под любой дизайн сайта. Здесь создаем плавный переход градиента, с одного оттенка на другой цвет, где получится плавный переход, и все очень корректно и красиво смотрится, что безусловно многих удивит. Что зразу задействуем свойство элемента, как background у которого еще будет свое значение linear-gradient.

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

Как создать сразу нескольких фонов?

При помощи CSS3, у нас открываются новые возможности, что позволяют одновременно выставить в качестве фона для одного элемента цвет, что также касается картинки или сразу поставить несколько изображений. Читайте еще: Правильный Description.

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

Закажите продвижение сайта через форму и получите скидку 20%:

Как вставить изображение? Как сделать изображение фоном?

Как запустить видеоурок:

1. Разархивировать скачанный файл.
2. Открыть папку index.
3. Запустить файл index.html в браузере.

В прошлом видеоуроке, Вы узнали, что такое списки и линии. А в этом мы рассмотрим изображения: их форматирование и атрибуты.

Как вставить изображение в HTML?

Перейдем в папку нашего сайта. Я для вас подготовил изображение info-line.png. Сначала создадим папку с именем img. Открываем ее, и переносим туда наше изображение. Картинка имеет формат png. Это можно увидеть либо внизу, либо при наведении курсора, либо в свойствах.

Перейдем в код. Давайте вставим изображение в текст. Делается это с помощью тега <img>. В кавычках указывается путь до изображения. В нашем случае: img/info-line.png. Хочу отметить, что вводить путь нужно в соответствии с регистром, то есть, если у вас изображение прописано с большой буквы «I», то так его нужно и вводить, иначе могут возникнуть неполадки.

 <img src="img/info-line.png">
 

Если изображение находится на каком-либо другом сервере, то вводится оно следующим образом: http://доменное_имя_сайта/ папка_с_изображением/изображение. Например, можно прописать:

 <img src="http://info-line.net/img/info-line.png">
 

Вернем все, как было. Давайте сохраним и посмотрим нашу страницу в браузере.  Обновляем. Наше изображение вставлено.

Атрибуты тега <img>

Давайте теперь разберем атрибуты, которые относятся к тегу <img>. Начнем с атрибута align. Знакомый нам атрибут. Поставим значение left. Здесь align может принимать также значения top (вверху), bottom (внизу) и middle (по центру). Но мы оставим left. Атрибут align означает здесь не только то, что наше изображение будет прибито гвоздями к левой части экрана, но и то, что текст, который обтекает данное изображение, будет обтекать его с правой стороны.

 <img src="img/info-line.png" align="left">
 

Далее идет атрибут alt, который задает альтернативный текст для изображения. То есть, если наше изображение не будет загружено, или у пользователя в браузере будет отключен показ изображений, то вместо изображения будет появляться указанный в этом атрибуте текст. Введем, например “info-line”.

 <img src="img/info-line.png" align="left" alt="Info-line">
 

Наше изображение было слишком большое. Давайте сделаем его меньше с помощью атрибутов width и height (ширина и высота). Например, по 150 пикселей.

 <img src="img/info-line.png" align="left" alt="Info-line" >
 

Зададим рамку с помощью атрибута border, например 2 пикселя.

 <img src="img/info-line.png" align="left" alt="Info-line" border="2" >
 

Сохраняем страничку и проверяем. На нашей странице с левого края появилась картинка размерами 150×150 пикселей с рамкой в 2 пикселя. Единственное, что нам здесь не нравится (во всяком случае, мне) – это то, что наше изображение так плохо обтекает текст, что нам это заметно.

Давайте сделаем отступ от изображения по горизонтали. Перейдем в код и добавим еще несколько атрибутов: hspase (горизонтальный отступ изображения от другого контента) и vspace (вертикальный отступ). Укажем, например, hspace – 2 пикселя, а vspace – 5 пикселей.

 <img src="img/info-line.png" align="left" alt="Info-line" border="2" hspace="2" vspace="5">
 

Сохраним, проверим в браузере. Обновляем страницу – отступ удался.

Давайте теперь сделаем так, чтобы после слова «нужно» обтекание текстом нашего изображения завершалось.  Переходим в код, находим слово «нужно»  с помощью комбинации клавиш «Ctrl+F».  Видим тег переноса. Этот тег имеет атрибут clear, который непосредственно относится к тексту. Атрибут имеет три значения: all, left и right. Что они означают? Они завершают обтекание текста.  Но значения left и right применяются тогда, когда в атрибуте align заданы значения left или right. Таким образом, у нас задано значение атрибута align – left, и мы применяем left к атрибуту clear. Наш текст будет отображен слева.

 <br clear="left">Это был именно тот момент в жизни, когда что-то внутри перещелкнуло и я стал идти по пути успеха.
 

Давайте сохраним и обновим нашу страничку в браузере. Мы видим, что наш текст, который ранее отображался справа от изображения, теперь отображается снизу. Это выглядит красивее.

Как сделать изображение фоном?

Перейдем в код и поговорим о том, как задать фон странички с помощью изображений (ведь вы уже знаете, как задать фон обычными цветами?).

Ищем тег. Прописываем атрибут background. В кавычках указываем путь до изображения. Давайте перейдем на рабочий стол. Я подготовил еще одно изображение для этого видеоурока. Называется оно bg.png. Его также нужно перенести в папку img. Оно имеет такое же расширение – png.

 <body text="#660000" bgcolor="#FFFCC" background="img/bg.png">
 

Давайте сохраним и проверим в браузере. Обновляем страницу. Как видим, фон у нас задан.

Что ж, на этом мы заканчиваем этот видеоурок. Попрактикуйтесь с изображениями. До встречи в следующем видеоуроке, в котором вы узнаете, что такое ссылки в HTML.

Можете ли вы добавить фон к месту слияния?

Привет, @Elizabeth Saucedo,

Конечно, вы можете сделать это с помощью модификаций CSS.

Вот что вы можете сделать:

1. На странице, где вы хотите изменить фон, добавьте макрос, который позволяет изменять HTML-код отображаемой страницы.

Вы можете выбрать:

• HTML-макрос (его можно добавить из панели управления в Confluence; макрос можно отключить, поэтому, если вы его не видите, вероятно, ваш администратор Confluence отключил использование этого макроса)
• Макрос Markdown (предполагается, что этот макрос вводит Markdown, но на самом деле вы можете добавить что угодно, от HTML через CSS до JavaScript.Содержимое внутри макроса будет вставлено на страницу после того, как вы закончите редактировать страницу.

2. Прикрепите к странице фоновое изображение.

3. В диалоговом окне изображения щелкните правой кнопкой мыши добавленное фоновое изображение и выберите Копировать URL-адрес изображения из контекстного меню.

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

4. Вставьте следующий код в добавленный макрос Markdown или HTML

Это идентификатор полотна страницы, на котором Confluence отображает текст страницы. Это селектор CSS для основного идентификатора.

Эта строка устанавливает цвет фона, если ваше изображение прозрачное.

 // цвет фона: голубой! Важный; 

Следующая строка добавляет прикрепленный фон:

 background-image: url ("https://example.net/wiki/download/thumbnails/123456/background.jpg")! Important; 

Флаг! Important в конце — это правило, которое переопределяет другие свойства фонового изображения, если они применяются к странице (если к ним также не применяется это правило).

Наконец, эта линия растягивается и заполняет добавленное фоновое изображение по всему холсту, нарисованному основным элементом.

 размер фона: 100% 100%; 

Я считаю, что вы также можете сделать это с помощью JScript, но я считаю, что использование CSS будет предпочтительнее (сначала он обрабатывается, вам не понадобится страница для рисования и завершения загрузки).

Если вам нужно применить это изображение к каждой странице в вашем пространстве, вы можете сделать одно из следующих действий:

• Добавить CSS в настройках пространства — это применит CSS к каждой странице, существующей в текущем пространстве.
• Добавьте CSS внутри макроса Markdown для шаблона страницы — это гарантирует, что каждый раз, когда ваши пользователи создают новую страницу, этот CSS будет автоматически добавляться к созданной странице, чтобы страница отображалась с измененным фоном. Все ранее добавленные страницы останутся нетронутыми.

Установить прозрачность с помощью шестнадцатеричного кода в HTML

1. Используйте шестнадцатеричный код CSS для обеспечения прозрачности фона в HTML
2. Используйте свойство CSS opacity , чтобы сделать фон прозрачным в HTML
3. Используйте свойство CSS background Сделать фон прозрачным в HTML

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

Использование шестнадцатеричного кода CSS для обеспечения прозрачности фона в HTML

Мы можем использовать шестнадцатеричный код CSS для обеспечения прозрачности элемента HTML. Мы можем установить шестнадцатеричный код в качестве значения свойства background . Шестнадцатеричный код, который мы будем использовать, состоит из восьми цифр. Формат восьмизначного шестнадцатеричного кода — #RRGGBBAA . Первые шесть цифр представляют собой шестнадцатеричный код для красного, зеленого и синего соответственно. Последние две цифры — это шестнадцатеричный код непрозрачности.

Например, создайте блок div и напишите в нем текст. В CSS выберите div и установите для свойства background значение # 00ff0080 . Шестнадцатеричный код # 00ff00 представляет зеленый цвет, а 80 представляет непрозрачность цвета. Это создаст зеленый фон в тексте и даст непрозрачность 50% или значение 128 . Двоичный эквивалент шестнадцатеричного значения 80 равен 128. Таким образом, мы можем использовать шестнадцатеричный код для создания прозрачного элемента в HTML.

Пример кода:

  
 Это текст 
  

  div {
    фон: # 00ff0080;
}
  

Используйте свойство CSS

opacity , чтобы сделать фон прозрачным в HTML

Мы можем создать прозрачный фон, используя свойство opacity в CSS. Мы можем использовать это свойство для любых элементов в HTML и можем сделать фон прозрачным. Свойство opacity устанавливает непрозрачность элемента.Он отвечает за установку степени скрытия содержимого за элементом. Диапазон значений от 0,0 до 0,9 . Более низкие значения соответствуют самому низкому уровню непрозрачности и наоборот. Это означает, что когда значение непрозрачности близко к 0,0 , содержимое за элементом становится более видимым. И содержание кажется более прозрачным. Мы также можем использовать представление % , чтобы установить непрозрачность. Он колеблется от 0% до 100% .

Например, создайте div с классом bg . Напишите текст как элемент между div . В CSS выберите элемент div и установите для фона желтый , используя свойство background-color . Затем выберите класс bg с помощью селектора классов. Затем установите непрозрачность на значение 0,5 .

В примере ниже создается фон желтого цвета, на котором написан текст.Значение непрозрачности 0,5 добавляет элементу прозрачности. Мы можем изменить значение с 0,0 на 1,0 , чтобы проверить степень непрозрачности в следующем примере. Таким образом, мы добавили прозрачность цвету фона в уроке.

Пример кода:

  
 Это текст 
  

  div {
    цвет фона: желтый;
}

.bg {
    непрозрачность: 0,5;
}
  

Использование свойства CSS

background , чтобы сделать фон прозрачным в HTML

Использование свойства opacity имеет недостаток.Значение непрозрачности , установленное в родительском элементе, применяется ко всем дочерним элементам. Чтобы избавиться от этой проблемы, мы можем использовать свойство CSS background . Мы можем указать значение rgba для элемента и запретить ему применять непрозрачность к дочерним элементам. Свойство background использует функцию rgba () , чтобы указать цвета RGB с их непрозрачностью. Синтаксис функции показан ниже.

  rgba (красный, зеленый, синий, альфа)
  

Мы можем указать интенсивность значений RGB в диапазоне от 0 до 255 .Мы также можем представить процентное значение в диапазоне от 0% до 100% . Мы можем указать значение альфы, как мы обсуждали в первом методе.

Внесите некоторые изменения CSS в пример кода первого метода. При выборе div удалите свойство background-color и добавьте свойство background . Запишите функцию rgba () как значение свойства. Установите значение красного как 255 и установите 0 для зеленого и синего.Запишите значение alpha как 0,2 . Затем удалите выделение класса bg .

Приведенные ниже фрагменты кода создают красный фон в тексте и добавляют степень прозрачности.

Пример кода:

  
 Это текст 
  

  div {
 фон: rgba (255,0,0, 0.2)
}
  

Внести вклад

DelftStack — это коллективный проект, созданный такими компьютерными фанатами, как вы. Если вам понравилась статья и вы хотите внести свой вклад в DelftStack, написав платные статьи, вы можете проверить страницу напишите для нас.

Как создать круглые фоны для ваших Font Awesome Icons

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

Но, не будучи экспертом в CSS, я не знал, как это настроить. После небольшого поиска и экспериментов я нашел два разных способа создать этот эффект.

Метод 1: круги CSS

Первый — создать круг с помощью свойства css border-radius и некоторого отступа , чтобы создать пространство вокруг значка.Вы можете установить радиус на 50% или на половину ширины и высоты, чтобы создать круг. Единственная загвоздка в том, что контейнер должен быть квадратным, иначе получится эллипс. Например, если я использую этот стиль

  .circle-icon {
    фон: # ffc0c0;
    отступ: 30 пикселей;
    радиус границы: 50%;
}
  

А затем попробуйте использовать его со значком font awesome, например:

Я получаю эллипс:

Таким образом, нам нужно явно указать высоту и ширину, и это приводит к тому, что нам также нужны некоторые правила для центрирования нашего значка по горизонтали (используя text-align ) и вертикально (используя высота строки и выравнивание по вертикали ).Итак, если мы обновим наш стиль CSS следующим образом:

  .circle-icon {
    фон: # ffc0c0;
    ширина: 100 пикселей;
    высота: 100 пикселей;
    радиус границы: 50%;
    выравнивание текста: центр;
    высота строки: 100 пикселей;
    вертикальное выравнивание: по центру;
    отступ: 30 пикселей;
}
  

Теперь мы получили желаемый круг:

Итак, миссия в некотором роде выполнена, хотя очень жаль, что приходится указывать точные размеры для вещей. Может быть, кто-нибудь из экспертов по CSS, читая это, подскажет, как лучше добиться этого эффекта.Хорошая новость заключается в том, что сам font awesome имеет концепцию «сложенных» значков, которая предлагает другой способ достижения того же эффекта.

Метод 2 — Значки с накоплением

Значки с накоплением — это, по сути, рисование двух значков с отличным шрифтом друг на друге. Font awesome поставляется со значком fa-circle , который представляет собой сплошной круг, поэтому мы можем использовать его для фона. Нам нужно стилизовать его, чтобы правильно установить цвет фона, и мы используем fa-stack-2x на этом значке, чтобы указать, что он должен быть нарисован в два раза больше значка, который будет отображаться внутри круга.Затем мы помещаем оба значка в диапазон с классом fa-stack , и мы все еще можем использовать стандартные стили шрифта awesome для выбора общего размера значка, например fa-4x . Так вот, например, у меня

, где icon-background просто указывает цвет фона:

  .icon-background {
    цвет: # c0ffc0;
}
  

и это выглядит так:

Как видите, это хороший простой метод, и я предпочитаю его подходу CSS.Font awesome также включает круги с границами, поэтому, если вы хотите создать что-то вроде этого (я использовал три сложенных значка), вы можете:

Чтобы поэкспериментировать с этим, попробуйте этот jsfiddle.

Как исправить фон в Tumblr

i Thinkstock Images / Stockbyte / Getty Images

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

Варианты тем

Платформа Tumblr предоставляет набор инструментов для нетехнических блоггеров, которые можно использовать для настройки своих блогов.Однако параметры, доступные вам при исправлении фона вашего блога Tumblr, ограничены гибкостью вашей темы. Например, некоторые темы предоставляют способ загрузки фоновых изображений через интерфейс без редактирования кода, некоторые темы предоставляют как цвет фона, так и параметры изображения, но для других тем эти параметры недоступны. Однако опытные программисты могут напрямую изменять HTML и CSS в любой теме Tumblr.

Инструмент настройки

Откройте инструмент настройки, войдя в свою панель управления Tumblr и щелкнув имя блога для редактирования в меню правой боковой панели.Щелкните ссылку «Настроить» под названием блога, чтобы открыть тему с помощью инструмента «Настроить». Проверьте наличие одной или нескольких записей с именем «Фон» в разделе «Внешний вид» меню «Настройка». Например, в теме по умолчанию будет возможность изменить цвет фона. Щелкните образец цвета в записи «Фон», чтобы открыть палитру цветов. Щелкните нужный цвет, затем щелкните «Сохранить», чтобы сохранить настройки фона. Для некоторых тем вы можете загрузить фоновое изображение с помощью инструмента настройки.

Редактировать HTML

Откройте страницу кода HTML для темы, щелкнув ссылку «Редактировать HTML» в инструменте настройки под названием темы. Чтобы отредактировать фоновый код HTML или CSS, найдите в коде теги «background». Измените атрибут «content =» в теге «color: Background» на шестнадцатеричный код желаемого цвета. Чтобы изменить фоновое изображение, замените существующий URL-адрес в теге image: Background на URL-адрес фонового изображения, которое нужно применить. Нажмите «Обновить предварительный просмотр», чтобы просмотреть изменения в окне предварительного просмотра, затем нажмите «Сохранить», чтобы сохранить изменения.Нажмите «Выход», чтобы закрыть инструмент и вернуться на панель управления.

Инструмент поиска

Чтобы быстро найти фоновые теги в коде HTML, откройте инструмент поиска, нажав «Ctrl-F». Панель инструментов «Найти» открывается в верхней части редактора HTML. Введите «фон» в поле поиска, чтобы найти каждый экземпляр тега «фон». Отредактируйте цвет фона, изображение и другие атрибуты; когда закончите, нажмите «Обновить предварительный просмотр», а затем «Сохранить».

Дополнительные настройки темы

Чтобы изменить цвет гиперссылки, щелкните образец цвета в записи «Ссылка», если она доступна, затем щелкните нужный цвет в палитре цветов.