Свойство css background
Содержание:
- Чтобы залить фон цветом
- Photoshop
- CSS background-image — фоновая картинка на сайте
- background-image
- CSS и наследование
- Snapseed
- CSS
- Изображения
- Как сделать фон для сайта онлайн
- Как задать цвет и изображение фона сайта
- Больше
- Создание фона с помощью Fhotofiltre
- Зачем создавать фон страницы
- Варианты смены фона
- Для тех, кто хочет знать лучше
- Чтобы установить фоновое изображение
Чтобы залить фон цветом
Для заливки фона у тэга BODY есть атрибут BGCOLOR.
Для примера возьмем следующую практическую
<HTML> <HEAD> <TITLE> Виды облаков </TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER"> Виды облаков </H1> <P ALIGN="JUSTIFY"> <B><I>Перистые облака</I></B> имеют толщину от сотен метров до нескольких километров. Они состоят из ледяных кристаллов в форме игл, столбиков, пластинок. </P> <P ALIGN="JUSTIFY"> <B><I>Перисто-кучевые облака</I></B> характеризуются небольшой шириной- 200-400 м. Структура облаков комковая. Они прозрачные. </P> <P ALIGN="JUSTIFY"> <B><I>Перисто-слоистые облака</I></B> имеют вид белой или голубоватой полупрозрачной пелены. Их толщина колеблется от 100 м до нескольких километров. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-кучевые облака</I></B> выглядят как белые, иногда сероватые волны, состоящие из пластин или хлопьев, разделенных просветами голубого неба, но могут сливаться и в сплошной покров. Толщина слоя высоко-кучевых облаков около 200-700 м. Из них выпадает дождь, снег. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-слоистые облака</I></B> образуют сплошной серый или синеватый "ковер" на небе с нижней границей обычно на высоте 3-5 км. Толщина облачных слоев 1-2 км. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-кучевые облака</I></B>-это серые облака, состоящие из крупных гряд, волн, пластин, разделенных просветами или сливающимися в сплошной серый волнистый покров. Состоят преимущественно из капель. </P> <P ALIGN="JUSTIFY"> <B><I>Слоистые облака</I></B> представляют из себя однородный серый или серо-желтый покров. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-дождевые облака</I></B> выглядят как сплошная серая пелена, закрывающий все небо в виде гряд и валов. Они состоят из водяных капель, редко в смеси со снежинками. </P> <P ALIGN="JUSTIFY"> <B><I>Кучевые облака</I></B> подразделяют на кучевые, кучевые средние и кучевые мощные. Толщина 1-2 км, иногда 3-5 км. </P> <P ALIGN="JUSTIFY"> <B><I>Кучево-дождевые облака</I></B> - очень мощные облачные скопления. </P> </BODY> </HTML>
Результат:
Для того чтобы залить фон голубым фоном в тэге BODY нужно указать атрибут BGCOLOR.
<BODY BGCOLOR="#3399FF">
И укажем, что мы хотели бы видеть текст белого цвета.
Это можно указать с помощью тэга <FONT COLOR=”FFFFFF”>. Но если нужно указать, чтобы текст всей страницы был одного цвета, это можно указать в тэге BODY
<BODY TEXT="#FFFFFF">
В результате получим код
<HTML> <HEAD> <TITLE> Виды облаков </TITLE> </HEAD> <BODY BGCOLOR="#3399FF" TEXT="#FFFFFF"> <H1 ALIGN="CENTER"> Виды облаков </H1> <P ALIGN="JUSTIFY"> <B><I>Перистые облака</I></B> имеют толщину от сотен метров до нескольких километров. Они состоят из ледяных кристаллов в форме игл, столбиков, пластинок. </P> <P ALIGN="JUSTIFY"> <B><I>Перисто-кучевые облака</I></B> характеризуются небольшой шириной- 200-400 м. Структура облаков комковая. Они прозрачные. </P> <P ALIGN="JUSTIFY"> <B><I>Перисто-слоистые облака</I></B> имеют вид белой или голубоватой полупрозрачной пелены. Их толщина колеблется от 100 м до нескольких километров. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-кучевые облака</I></B> выглядят как белые, иногда сероватые волны, состоящие из пластин или хлопьев,разделенных просветами голубого неба,но могут сливаться и в сплошной покров. Толщина слоя высоко-кучевых облаков около 200-700 м. Из них выпадает дождь,снег. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-слоистые облака</I></B> образуют сплошной серый или синеватый "ковер" на небе с нижней границей обычно на высоте 3-5 км. Толщина облачных слоев 1-2 км. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-кучевые облака</I></B>-это серые облака, состоящие из крупных гряд, волн, пластин, разделенных просветами или сливающимися в сплошной серый волнистый покров. Состоят преимущественно из капель. </P> <P ALIGN="JUSTIFY"> <B><I>Слоистые облака</I></B> представляют из себя однородный серый или серо-желтый покров. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-дождевые облака</I></B> выглядят как сплошная серая пелена, закрывающий все небо в виде гряд и валов. Они состоят из водяных капель,редко в смеси со снежинками. </P> <P ALIGN="JUSTIFY"> <B><I>Кучевые облака</I></B> подразделяют на кучевые, кучевые средние и кучевые мощные. Толщина 1-2 км, иногда 3-5 км. </P> <P ALIGN="JUSTIFY"> <B><I>Кучево-дождевые облака</I></B> - очень мощные облачные скопления. </P> </BODY> </HTML>
А в браузере увидим:
Photoshop
Довольно просто добиться белого фона с помощью программы Photoshop, не усложняя процедуру применение пипеток, коррекцией цвета и созданием новых слоев.
Этот способ придет на помощь даже людям, не умеющим пользоваться данной программой. В данном случае не имеет значение цветной фон или однотонный.
Потребуется выполнить следующие шаги:
- открыть редактируемое видео в программе Photoshop;
- сильно увеличить изображение, чтобы его было удобно редактировать;
- выбрать инструмент «Ластик»;
- установить следующие параметры: размер кисти — 30 пикселей, жесткость — 0%, вид — мягкая круглая;
- обвести очертания предмета;
- уменьшить фотографию, чтобы она вся помещалась на экран;
- выбрать инструмент «Волшебный ластик»;
- щелкнуть им в любом месте проведения ластиком;
- выбрать инструмент «Магнитное лассо»;
- обвести контур предмета;
- скопировать выделенное изображение;
- создать новый документ;
- вставить скопированное изображение на белый фон;
- сохранить полученный результат.
CSS background-image — фоновая картинка на сайте
Свойство CSS background-image — позволяет установить фоновое изображение на сайте.
Синтаксис CSS background-image
Например, для установки общего (глобального) фона:
Например фоновая картинка:
После двоеточия указывается адрес изображения. Можно использовать как относительный так и прямой адрес.
В CSS3 можно задать несколько фоновых изображений (они как бы накладываются друг на друга как слои).
Задавая фон в виде картинки есть возможность настраивать так же ряд важных свойств CSS
- background-repeat
- background-attachment
- background-position
- background-size
- background-clip
Рассмотрим в отдельности эти параметры
4.1. CSS background-repeat
Свойство CSS background-repeat определяет повторять ли фон. Можно отдельно настраивать повторение по вертикали и горизонтали.
Синтаксис CSS background-repeat
Где value может принимать следующие значения:
- repeat-x — повторять фоновое изображение по горизонтали;
- repeat-y — повторять фоновое изображение по вертикали;
- no-repeat — не повторять фоновое изображение;
- repeat (по умолчанию) — повторять фоновое изображение по горизонтали и вертикали;
- space — все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются;
- round — аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения;
Например, по горизонтали не повторять, по вертикали повторять фоновое изображение:
4.2. CSS background-attachment
Свойство CSS background-attachment задает привязки фона изображения. Можно зафиксировать задний фон, чтобы при прокрутке скроллом он не крутится или же наоборот фон будет прокручиваться вместе с сайтом.
Синтаксис CSS background-attachment
Где value может принимать следующие значения:
- scroll (действует по умолчанию) — фон прокручивается вместе с сайтом;
- fixed — при прокрутке скролла фон остается неизменными;
- local — изображение прокручивается с контентом, но не с элементом, его содержащим;
Я думаю, что Вы видели такие сайты и понимаете о чем идет речь.
4.3. CSS background-position
Свойство CSS background-position задает расположение фона относительно левого верхнего угла.
Синтаксис CSS background-position
В параметрах мы указываем выравнивание (смещение) в пикселях или процентах сначала по оси Х, потом по оси У. value, value2 может принимать следующие значения:
- top — выравнивание по верхнему краю;
- left — выравнивание с левого края;
- right — выравнивание с правого края;
- bottom — выравнивание по нижнему краю;
- center — выравнивание по центру;
- число/проценты — можно задавать отступ в виде числа или процентов;
По умолчанию фон располагается в верхнем левом углу.
Можно указывать в пикселях Npx задание отступа от разных краев. Проще понять это на примере:
Фон будет выравнивать по правому краю со смещением 50 пикселей вниз.
Или например сместим фон на 100px вправо и расположим его по центру относительно высоты.
Все эти параметры можно задать в таблице стилей CSS. Этот параметр выравнивает расположение фона на странице.
4.4. CSS background-size
Свойство CSS background-size позволяет задавать размеры фона.
Синтаксис CSS background-size
Где первый параметр задает значение по оси Х, второй параметр по оси У. Можно задавать как в процентах, так и пикселях.
Так же может принимать два статичных параметра
- contain — масштабирует изображение по длинной стороне (заполняет все пространство)
- cover — масштабирует изображение по короткой стороне (заполняет все пространство)
Напоследок запишем все атрибуты вместе:
Для обращения к float из JavaScript нужно писать следующую конструкцию:
background-image
Устанавливает в качестве фона картинку. Если изображение подобрано правильно, то страница на его фоне будет выглядеть гораздо красивее, чем на фоне одноцветном.
Например, картинка background.png хранится в той же папке, что и веб-страница, и вы хотите установить её как фон параграфам этого HTML-документа. Код будет таким:
p { background-image: url(background.png); }
Для одного и того же веб-элемента можно установить несколько фоновых рисунков. Для этого достаточно перечислить их все в свойстве background-image через запятую:
Body { background-image: url(”image/background01.png”), url(”image/background02.png”), url(”image/background03.png”), url(”image/background04.png”); }
Очевидно, что без определённого позиционирования выбранные рисунки при отображении будут накладываться друг на друга, причём первое из перечисленных будет самым верхним, последнее — под всеми, задним фоном.
CSS и наследование
В CSS, если вы применяете стиль к тегу, все теги, которые находятся внутри него, будут иметь тот же стиль.
Если я применил черный цвет-фон и белый цвет текста к тегу
<body>
, все заголовки и абзацы также будут иметь черный фон и белый текст… Это называется наследованием: теги, которые находятся внутри другого тега, «наследуют» его свойства.
Это также отображено в названии «CSS», что переводится как «Каскадные таблицы стилей». Свойства CSS наследуются в каскаде: если вы задаете стиль элементу, все его дочерние элементы будут иметь тот же стиль.
Это означает, что весь текст моей веб-страницы обязательно будет белым?
Нет, не обязательно. Если вы позже укажете, что хотите, чтобы заголовки были красными, этот стиль будет иметь приоритет, и заголовки станут красными.
Наследственность работает не только для цвета. Все свойства CSS наследуются. Например, можно назначить жирный шрифт в теге
<body>
, и все заголовки и абзацы будут отображаться жирным шрифтом.
Пример наследования с тегом
<mark>
Многие уверены, что они могут изменять только html цвет фона страницы. Это не так: можно изменить фон любого элемента: заголовков, абзацев, определенных слов и т. д. В этом случае они будут выделены (как если бы они были отмечены маркером).
Например, существует тег
<mark>
, который используется для выделения определенных слов. Давайте используем его здесь:
<h1>Who turned off the lights?</h1> <p>Brr, it's all black on this website; it's a rather <mark>disturbing</mark> atmosphere don't you think?</p>
По умолчанию текст отображается на желтом фоне. Можно изменить это с помощью CSS:
body
{
background-color: black;
color: white;
}
mark
{
/* Цвет фона переопределяет цвет всей страницы */
background-color: red;
color: black;
}
Красный цвет — фон применяется к тексту тега
<mark>
. Действительно, даже если фон html-страницы черный, это свойство CSS для наиболее специфичного элемента имеет приоритет (смотрите рисунок, приведенный ниже):
Красный выделенный текст на черном фоне
Тот же принцип применим ко всем HTML-тегам и свойствам CSS. Если вы скажете:
- Текст абзацев у меня отображается шрифтом с размером 1,2em;
- Важные тексты (
<strong>
) у меня отображается шрифтом с размером 1,4 em.
… то можете подумать, что возникнет конфликт. Если важный текст является частью абзаца, шрифтом какого размера он должен отображаться? 1,2 em или 1,4 em? CSS решит, что наиболее специфичное объявление имеет приоритет: поскольку
<strong>
соответствует более специфичному элементу, чем параграфы, текст будет выводиться шрифтом с размером 1.4 em.
Snapseed
Данное приложение также способно сделать белым задний фон на фото. Последовательность действий для этого довольно проста:
- открыть фото, нуждающееся в редактировании;
- в разделе «Инструменты» выбрать «Кисть», а затем «Насыщенность»;
- установить значение насыщенности в интервале от -5 до -10;
- выделить участки, требующие отбеливания;
- в разделе «Инструменты» выбрать «Кисть», а затем «Экспозиция»;
- установить значение экспозиции -3;
- выделять места, которые необходимо отбелить;
- сохранить готовое фото.
При необходимости контрастность и насыщенность фотографии, отбеленной в Snapseed, можно отредактировать в VSCO.
CSS
Если вам нужно, чтобы фон повторялся на всех страницах вашего сайта, то без CSS не обойтись. Конечно, можно каждый раз прописывать путь, как в предыдущей главе. Но представьте, если со временем вам будет нужно его заменить: ссылка устареет или просто захочется поменять дизайн. Заходить на каждую страничку и менять код? Так не пойдет.
CSS помогает решить эту проблему. Вам нужно создать файл с расширением css и ввести следующий код:
<style>
body { background url(путь к файлу); }
</style>
|
Далее подключите этот документ к основному html и готово.
Давайте немного поговорим о самом коде. В скобках, после url вы можете вписать ссылку на картинку из стороннего источника, или просто название документа, если картинка лежит в одной папке с этим файлом.
Изображения
Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений
Как сделать фон для сайта онлайн
Перед тем как мы будем создавать фон, вы должны понять, что не стоит выбирать для этого большое изображение, которое создаст только дополнительную нагрузку на проект, в результате чего он будет долго загружаться.
О том, как увеличить скорость загрузки блога я писал в предыдущих статьях: «Плагин Hyper Cache» и «Оптимизация базы данных».
Поэтому в качестве картинки для фона лучше всего использовать ПАТТЕРН.
Паттерн — это небольшая картинка, не имеющая швов, которая при повторении образует большой фон, заполняющий все пространство сайта.
Чтобы сделать фон (паттерн) существует огромное число способов. Например, вы можете открыть любой поисковик и вбить в строку поиска запрос «Скачать фон для сайта», а потом долго просматривать различные сайты в надежде отыскать подходящий паттерн.
Но как сделать фон приложив минимум усилий? Предлагаю обратить внимание на подборку онлайн сервисов, которые в своей базе имеет сотни уже готовых фонов, их останется только отредактировать и настроить по своему вкусу. 1) PatternCooler
1) PatternCooler
Один из самых крупных хранилищ подборки фонов. Здесь вы сможете отыскать паттерн различной фактуры, сами изменить параметры цвета, а также выбрать популярный из топ.
Посмотрите, что у меня получилось выбрать для себя:
2) Stripegenerator
Тоже неплохой онлайн генератор фонов. Есть небольшой ряд настроек и немаленькая база заготовок.
Мой результат работы:
3) BgPatterns
Очень интересный сервис по созданию онлайн фона. Вы можете выбрать различные рисунки (сердечки, звездочки, кружочки) и цветовую гамму создаваемого фона.
Посмотрите, что я подобрал себе:
4) Tartanmaker
Для тех, кто хочет создать себе фон в клеточку стоит посетить данный онлайн сервис фонов.
Как задать цвет и изображение фона сайта
Для задания цвета фона используют свойство background-color, оно принимает значения в шестнадцатеричном формате цвета, в формате RGB, задание цвета при помощи ключевых слов.
Чтобы использовать в качестве фона сайта изображения, применяют свойство background-image, где указывают ссылку на файл. Можно использовать одновременно и вариант с цветом фона, и с изображением. Тогда изображение накладывается поверх фона определенного цвета.
Теперь поговорим о том, как регулировать повторение фонового изображения, как растянуть его на весь экран и т.д. Свойство, которое отвечает за повтор фона, называется background-repeat. Оно принимает четыре значения. В качестве значения по умолчанию принимается repeat (повторять по вертикали и горизонтали). Три других значения:
- repeat-x — повторяет изображение по горизонтали
- repeat-y — повторяет изображение по вертикали
- no-repeat — не повторяет изображение совсем
Для задания размера фонового изображения сайта используют свойство background-size, оно принимает значения в процентах, пикселях и слово auto. Имеет два значения через пробел. Первое значение отвечает за растяжение по горизонтали, второе по вертикали. Если первое значение задано (например, 100%), а второе значение выставлено auto, то фон по горизонтали растянется на весь размер блока, а по вертикали подгоняет высоту для данной ширины. Есть еще два значения для этого свойства (cover и contain). Cover изменяет размеры изображения так, чтобы блок был полностью закрыт картинкой, а contain так, чтобы картинка поместилась в блок целиком. Cover и contain задаются по одному, через пробел уже ничего писать не нужно.
Пример. Зададим цвет фона, его изображение без повтора и растянем его по ширине и высоте:
Положение фонового изображения, background-position
Немного подробнее остановимся на работе с фоновым изображением, которое не нужно повторять. Для регулирования нахождения этого изображения внутри блока, которому мы задаем фон, используется CSS-свойство background-position. Это свойство принимает два значения через пробел. Первое определяет положение по оси x (горизонтали), второе по оси y (вертикали).
Единицы измерения этих двух величин проценты и пиксели. Еще они принимают значения top, bottom, left, right, center. Значения для оси x, естественно, left, right, center. Значения для оси y — top, bottom, center. Единицы измерения, значения, пиксели и проценты можно комбинировать между собой в произвольном формате. В примере ниже зададим позиции для фонового изображения. В первом случае будет изображение по центру в процентах. Во втором случае изображение в правом нижнем углу блока. В третьем случает изображение сдвинуто на 50 пикселей слева и на 100 пикселей сверху. Пример:
Фиксим фонового изображения, background-attachment
Иногда для создания визуальных эффектов нужно, чтобы фон при прокрутки не уезжал вместе с просмотренной частью страницы, а оставался на месте. Это будет создавать интересный эффект параллакса.
Для фиксации фона используется css-свойство background-attachement. Оно принимает два значения, scroll — значение по умолчанию, прокрутка вместе со всем остальным содержимым, fixed — фон остается на месте при прокрутке.
Больше
Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME
Создание фона с помощью Fhotofiltre
Для того, чтобы создать нужный фон необходимо открыть программу. Открыть ее и кликнуть мышкой, после ее загрузки нужно скинуть нужную фотографию, затем загрузить ее и затем открыть. Для того, чтобы скинуть фото нужно знать его расположение, затем найти нужную папку с изображением и выбрать ее.
Название его может отображаться по-разному, при сохранении оно может изменяться. Затем следует его открыть. После его загрузки в окне, следует развернуть страницу на всю для удобства в дальнейшей работе, далее жмем на заливку.
Легко удалить рамку вокруг изображения, внизу расположена галерея рабочих фото, можно сразу видеть размер фото и самая главная функция приложения – заливка.
Зачем создавать фон страницы
Здравствуйте друзья! Майкрософт Офис Ворд имеет очень много функций, для редактирования текстов. В нём пишутся не только статьи, книги. Также различные посты с картинками и цветными фонами. Иногда, новички задают вопрос, как сделать фон в Ворде на всю страницу? На самом деле этот процесс простой.
Итак, зачем создаются фоны в вордовских документах? Всё просто. Они нужны, чтобы оформить красиво созданный текст для определённого материала. Например, нужно создать фон красным, или добавить на него узоры, текстуры, свой рисунок. Дальше, мы на практике всё это сделаем, и посмотрим на результаты.
Варианты смены фона
Всего существует несколько вариантов сменить задний план у слайдов, позволяющих делать это как простыми, так и комплексными средствами. Выбор будет зависеть от дизайна презентации, ее задачи, но главным образом – от желания автора.
В целом, можно выделить четыре основных способа задать фон у слайдов.
Способ 1: Смена дизайна
Наиболее простой способ, который является первым шагом при создании презентации.
- Требуется зайти во вкладку «Дизайн» в шапке приложения.
Здесь можно видеть широкий ряд всевозможных базовых вариантов дизайна, отличающихся не только компоновкой областей слайдов, но и фоном.
Хороший и простой метод, но он меняет фон для всех слайдов, делая их однотипными.
Способ 2: Изменение вручную
Если же требуется заняться более сложным задним планом в условиях, когда в предложенных вариантах дизайна ничего нет, начинает работать древняя поговорка: «Если хочешь сделать что-то хорошо – сделай это сам».
- Здесь два пути. Либо нажать правой кнопкой по пустому месту на слайде (или по самому слайду в списке слева) и в открывшемся меню выбрать «Формат фона…»…
…либо зайти во вкладку «Дизайн» и нажать аналогичную кнопку в самом конце панели инструментов справа.
Для создания собственного фона на основе картинки потребуется выбрать вариант «Рисунок или текстура» в первой вкладке, после чего нажать кнопку «Файл». В окне обозревателя потребуется найти изображение, которое планируется использовать в качестве фоновой. Картинки стоит выбирать исходя из размеров слайда. По стандарту это соотношение 16:9.
Также внизу присутствуют дополнительные кнопки. «Восстановить фон» отменяет все сделанные изменения. «Применить ко всем» использует полученный результат ко всем слайдам в презентации автоматически (по умолчанию пользователь редактирует один конкретный).
Данный способ является самым функциональным ввиду широты возможностей. Можно создавать уникальные виды хоть для каждого слайда.
Способ 3: Работа с шаблонами
Есть еще более глубокий способ универсальной настройки фоновых изображений.
- Для начала следует войти во вкладку «Вид» в шапке презентации.
Здесь нужно перейти в режим работы с шаблонами. Для этого требуется нажать «Образец слайдов».
Откроется конструктор макетов слайдов. Здесь можно как создать собственный вариант (кнопка «Вставить макет»), так и отредактировать имеющийся. Лучше всего создать самому свой вид слайда, который лучше всего подойдет для презентации по стилистике.
Теперь нужно провести уже вышеописанную процедуру – войти в «Формат фона» и произвести нужные настройки.
Также можно воспользоваться стандартными средствами редактирования оформления, которые находятся в шапке конструктора. Здесь можно как задать общую тему, так и настроить вручную отдельные аспекты.
После окончания работы лучше всего задать имя для макета. Это можно сделать с помощью кнопки «Переименовать».
Шаблон готов. После окончания работы остается нажать на «Закрыть режим образца», чтобы вернуться в нормальный режим презентации.
Теперь на нужных слайдах можно нажать правой кнопкой мыши в списке слева, и выбрать вариант «Макет» во всплывающем меню.
Здесь будут представлены применимые к слайду шаблоны, среди которых как раз будет созданный ранее со всеми заложенными параметрами фона.
Остается нажать на выбор и образец будет применен.
Этот способ идеален для условий, когда в презентации требуется создавать группы слайдов с разными типами фоновых картинок.
Способ 4: Картинка на заднем плане
Дилетантский способ, но не сказать о нем нельзя.
- Нужно произвести вставку картинки в программу. Для этого входим во вкладку «Вставка» и выбираем вариант «Рисунки» в области «Изображения».
В открывшемся обозревателе требуется найти нужную картинку и дважды кликнуть по ней. Теперь остается лишь нажать на вставленную картинку правой кнопкой мыши и выбрать вариант «На задний план» во всплывающем меню.
Теперь картинка не будет фоном, но будет находиться позади остальных элементов. Достаточно простой вариант, однако не без минусов. Выделять компоненты на слайде станет проблематичнее, поскольку курсор чаще всего будет попадать именно на «фон» и выбирать его.
Для тех, кто хочет знать лучше
При помощи css вы можете растянуть background image, сделать так, чтобы оно не повторялось, добавить gif-анимацию и многое другое.
В одной статье всего не упишешь. Да и задачи такой я перед собой не ставил. Существует масса тонкостей и если вам обещают рассказать в одной статье обо всем, то это ни что иное как обман.
Хотите научиться правильно писать сайты? Я рекомендую вам изучать языки программирования по другой программе. Могу посоветовать курс Андрея Бернацкого «HTML5 и CSS3 с Нуля до Профи». Мне очень нравится этот автор. Я не проходил конкретно этот курс, несколько лет назад было уже что-то аналогичное, но менее современное.
Кстати, вместе с этим курсом вы получаете 7 бонусов: основы html и css Андрея Бернацкого, верстка для начинающих, создание лендинг пейдж за вечер и многое другое. Перед тем как заниматься серьёзным обучением, пощупайте бесплатный курс «Практика HTML5 и CSS3».
Ну вот в принципе и все. Подписывайтесь на рассылку, чтобы узнавать больше. Совсем скоро я расскажу чуть больше о адаптивной верстке, программе Bootstrap, увеличении заработка с любого блога и дам множество полезных советов о упрощении работы. До новых встреч и удачи в ваших начинаниях.
Чтобы установить фоновое изображение
При желании фон можно залить изображением. Для этого в папке сайта создаем папку images, в которую сохраним изображение фона fon.jpg. А для заливки воспользуемся атрибутом BACKGRAUND тэга BODY .
Это будет выглядеть так:
<HTML> <HEAD> <TITLE> Виды облаков </TITLE> </HEAD> <BODY BACKGROUND="images/fon.jpg"> <H1 ALIGN="CENTER"> Виды облаков </H1> <P ALIGN="JUSTIFY"> <B><I>Перистые облака</I></B> имеют толщину от сотен метров до нескольких километров. Они состоят из ледяных кристаллов в форме игл, столбиков, пластинок. </P> <P ALIGN="JUSTIFY"> <B><I>Перисто-кучевые облака</I></B> характеризуются небольшой шириной- 200-400 м. Структура облаков комковая. Они прозрачные. </P> <P ALIGN="JUSTIFY"> <B><I>Перисто-слоистые облака</I></B> имеют вид белой или голубоватой полупрозрачной пелены. Их толщина колеблется от 100 м до нескольких километров. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-кучевые облака</I></B> выглядят как белые, иногда сероватые волны, состоящие из пластин или хлопьев,разделенных просветами голубого неба,но могут сливаться и в сплошной покров. Толщина слоя высоко-кучевых облаков около 200-700 м. Из них выпадает дождь,снег. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-слоистые облака</I></B> образуют сплошной серый или синеватый "ковер" на небе с нижней границей обычно на высоте 3-5 км. Толщина облачных слоев 1-2 км. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-кучевые облака</I></B>-это серые облака, состоящие из крупных гряд, волн, пластин, разделенных просветами или сливающимися в сплошной серый волнистый покров. Состоят преимущественно из капель. </P> <P ALIGN="JUSTIFY"> <B><I>Слоистые облака</I></B> представляют из себя однородный серый или серо-желтый покров. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-дождевые облака</I></B> выглядят как сплошная серая пелена, закрывающий все небо в виде гряд и валов. Они состоят из водяных капель,редко в смеси со снежинками. </P> <P ALIGN="JUSTIFY"> <B><I>Кучевые облака</I></B> подразделяют на кучевые, кучевые средние и кучевые мощные. Толщина 1-2 км, иногда 3-5 км. </P> <P ALIGN="JUSTIFY"> <B><I>Кучево-дождевые облака</I></B> - очень мощные облачные скопления. </P> </BODY> </HTML>
Результат:
Adblock