How to apply css opacity to background color only?
Содержание:
- CSS и наследование
- Как сделать картинку без фона в ворде?
- Как сделать прозрачный фон картинки в ворде?
- Как сделать чтобы картинка была без фона?
- Как сделать прозрачный фон в Paint?
- Как сделать текст без фона в Word?
- Как в ворде сделать картинку прозрачной?
- Как вставить в презентацию картинку без фона?
- В каком формате сохранять изображение без фона?
- Как сохранить PNG с прозрачным фоном Paint?
- Как сделать прозрачный фон в Paint PNG?
- Как скопировать только текст без фона?
- Как убрать фон при копировании текста из Интернета в Ворд?
- Как убрать серую заливку в ворде?
- Цвет фона CSS
- CSS Properties
- RGBA
- Прозрачность
- Прозрачность различных элементов
- Размер фоновой картинки
- PNG в качестве фона
- Использование css-свойства opacity
- Как изменить фон в презентации?
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.
Как сделать картинку без фона в ворде?
Как сделать прозрачный фон картинки в ворде?
Изменение прозрачности части рисунка
- Выберите рисунок, для которого требуется изменить прозрачность цвета.
- На вкладке Формат рисунка нажмите кнопку Цвет, а затем щелкните Установить прозрачный цвет.
- Щелкните область рисунка или изображения, закрашенную тем цветом, который требуется сделать прозрачным.
Как сделать чтобы картинка была без фона?
Способ 1: инструмент «удалить фон»
- Нажмите левой кнопкой мышки по рисунку на слайде.
- Сверху выбирайте вкладку «формат» и нажимайте первую кнопку «удалить фон».
- У рисунка автоматически удалится фон за рамками произвольного прямоугольника — Рисунок 2.
Как сделать прозрачный фон в Paint?
Как добавить прозрачные фоны к изображениям с помощью Paint:
- Откройте Paint, нажав кнопку Cortana. Введите ключевое слово «Paint» в поле поиска Cortana и выберите «Paint».
- Затем нажмите Файл > Открыть ; и выберите изображение для открытия.
- Нажмите кнопку Выбрать , а затем выберите параметр Прозрачный выбор .
Как сделать текст без фона в Word?
Чтобы убрать это выделение:
- Курсором выделите весь текст, фон которого необходимо убрать или изменить
- Откройте вкладку «Клавная» в верхней части документа
- Найдите иконку с изображением ведра с краской и нажмите на него
- В выпадающем списке выберите нет цвета. …
- Еще один инструмент чтобы убрать фон текста — это маркер.
Как в ворде сделать картинку прозрачной?
Вот как это делается. Выделите фигуру или фигуры, которые необходимо сделать прозрачными. Щелкните их правой кнопкой мыши и в контекстном меню выберите Формат фигуры. В области Формат фигуры с помощью ползунка Прозрачность задайте нужный процент прозрачности.
Как вставить в презентацию картинку без фона?
Удаление фона рисунка
- Выберите рисунок, фон которого нужно удалить.
- Выберите Формат рисунка > удалить фонили Формат > удалить фон. …
- По умолчанию область фона будет закрашена пурпурным (что показывает, что ее можно удалить), а изображение на переднем плане сохранит естественные цвета.
В каком формате сохранять изображение без фона?
Картинки без фона не всегда называются PNG. Они могут называться и GIF, и SVG, и PSD и как-то ещё, если формат поддерживает альфа-канал — прозрачные пиксели или прозрачные слои, или прозрачные векторные объекты.
Как сохранить PNG с прозрачным фоном Paint?
Следующее, что нужно сделать – сохранить изображение с прозрачным фоном в Paint.net. Выбираем в меню «Файл» – «Сохранить как». Теперь, в поле «Тип файла», укажите один из форматов PNG или GIF, если выберите другой формат – картинка будет сохранена на белом фоне. Нажмите «Сохранить».8 мая 2016 г.
Как сделать прозрачный фон в Paint PNG?
Как сделать прозрачный фон в Paint?
- Открываем фотографию, которую вы собираетесь в будущем вставлять в другие изображения.
- Нажимаем кнопку «Выделить» в верхней части панели инструментов.
- Выбираем пункт «Прозрачное выделение».
- Кликаем снова на «Выделить» и выбираем пункт «Выделить все».
Как скопировать только текст без фона?
Для этого выделите скопированный из Интернета текст, перейдите на вкладку «Главная», нажмите на стрелку рядом с кнопкой «Цвет выделения текста» и выберите вариант «Нет цвета». Если это не помогло и фон не исчез, то возможно проблема в том, что цвет фона задан сразу для всей страницы.
Как убрать фон при копировании текста из Интернета в Ворд?
- В открытом документе откройте вкладку «Главная».
- Выделите необходимый фрагмент текста, фон которого нужно убрать. Совет! Для выделения текста всего документа используйте сочетание горячих клавиш Ctrl+A.
- Теперь в подкатегории «Абзац» найдите кнопку «Заливка».
- Нажмите на нее и выберите «Нет цвета».
Как убрать серую заливку в ворде?
Как убрать заливку в ворде
- Выделите весь затемненный документ. Откройте вкладку — Правка – Выделить все;
- После выделения перейдите на вкладку меню Формат и выберите Границы и заливка;
- В открывшемся окне Границы и заливка перейдите на вкладку Заливка и выберите Нет заливки;
Цвет фона CSS
Не знаете как изменить цвет фона в html? Чтобы указать html цвет фона страницы сайта, используйте свойство background-color CSS. Оно используется так же, как и свойство color, другими словами, можно ввести название цвета, его шестнадцатеричное значение или RGB.
Чтобы указать цвета для фона веб-страницы, необходимо работать с html-тегом
<body>
Рассмотрите приведенный ниже код CSS:
/ * Мы работаем с тегом body, и соответственно со ВСЕЙ страницей * /
body
{
background-color: black; /* Фон страницы будет черным */
color: white; /* Текст страницы будет белым */
}
Результат работы этого кода простой html страницы с фоном:
Белый текст на черном фоне
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
RGBA
Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity
здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba
, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..
Рис. 1. Синтаксис применения rgba
В примере 2 показано применение формата RGBA для создания полупрозрачного фона.
Пример 2. Полупрозрачный фон
HTML5
CSS3
IE 9+
Cr
Op
Sa
Fx
rgbaГоббс одним из первых осветил эту проблему с позиций психологии.
Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.
Рис. 2. Полупрозрачный фон и непрозрачный текст
Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).
Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.
Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…
С помощью RGBa
решение выглядит следующим образом:
1. Допустим, нам нужен синий фон с прозрачностью 50%.
А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x
2. Для IE можно постараться и сделать более изящно:
|
.element{ background filter:progid endColorstr= zoom: } |
Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF — полностью непрозрачный, 00 — прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.
Использование RGBa не ограничивается только фоновым цветом у блоков…
В CSS есть три способа изменить прозрачность элемента:с
помощью свойства opacity ,с
помощью функции rgba() ,с
помощью функции hsla() .
1. Свойство opacity
Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity , содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:
H1 {color: #CD6829;}
div {
background: #CDD6DB;
opacity: .3;
}
Рис. 1. Прозрачность элементов с помощью opacity
2. Функция rgba()
Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red)
, зеленого (Green)
и синего (Blue)
цветов, а альфа-канал (Alpha)
отвечает за степень прозрачности цвета. В отличие от свойства opacity , для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.
3. Функция hsla()
Функция hsla() , параметры которой означают тон (Hue)
, насыщенность (Saturation)
, яркость (Lightness)
и альфа-канал (Alpha)
, также позволяет задать полупрозрачный цвет.
Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета:
0/360° — красный цвет
60° — желтый цвет
120° — зеленый цвет
180° — голубой цвет
240° — синий цвет
270° — фиолетовый цвет
300° — пурпурный цвет
.
Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1) . Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1) , а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1) .
Прозрачность
CSS позволяет легко изменять уровни прозрачности элементов. Для этого мы будем использовать свойство opacity и модель RGBa.
Свойство opacity или как сделать фон страницы в html прозрачным
Свойство opacity используется для указания уровня непрозрачности (который является обратным для прозрачности).
- При значении 1 элемент будет полностью непрозрачным: это поведение по умолчанию.
- При значении 0 элемент будет полностью прозрачным.
Вам нужно выбрать значение от до 1. При значении 0,6 элемент будет на 60% непрозрачным, и вы сможете видеть сквозь него!
Вот как это можно использовать:
p
{
opacity: 0.6;
}
Вот пример, который даст представление о прозрачности.
body
{
background: url('snow.png');
}
p
{
background-color: black;
color: white;
opacity: 0.3;
}
Прозрачный абзац
Прозрачность работает во всех браузерах, включая Internet Explorer, начиная с версии IE9 и выше.
Если вы примените свойство opacity к элементу веб-страницы, все содержимое этого элемента станет прозрачным. Если хотите сделать цвет фона прозрачным, лучше всего использовать указание RGBa.
Модель RGBa
CSS3 предоставляет еще один способ изменения прозрачности: модель RGBa. Это RGB, которое мы рассматривали ранее, но с четвертым параметром: уровнем прозрачности (альфа-каналом). При значении 1 фон полностью непрозрачен. При значении менее 1 он становится прозрачным.
p
{
background-color: rgba(255, 0, 0, 0.5); /* Красный, полупрозрачный фон */
}
Это обозначение распознают все современные браузеры, включая Internet Explorer (начиная с версии IE9 и выше). Для устаревших браузеров рекомендуется указывать стандартный код RGB, в дополнение к RGBa.
p
{
background-color: rgb(255,0,0); /* Для старых браузеров */
background-color: rgba(255,0,0,0.5); /* Для новых браузеров */
}
Прозрачность различных элементов
Рассмотрим некоторые примеры задания прозрачности определенным элементам, которые чаще всего используются на странице.
CSS прозрачность картинки.
Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.
Прозрачность
Результат:
Прозрачность на CSS при наведении курсора на картинку.
Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса:hover. Для этого нашей картинке нужно прописать два класса один обычный — это будет неактивное состояние картинки и второй класс с псевдоклассом:hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.
Прозрачность
Результат можете посмотреть в демо.
Прозрачность фона на CSS.
Здесь необходимо помнить, что прозрачность распространяется на все вложенные элементы и они не могу обладать большей прозрачностью чем вложенный элемент.
В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.
Пример кода:
Прозрачность
Текст
Вот результа размещенного выше кода:
Как задать в css прозрачный цвет? На текущий момент для этого есть 3 способа.
Способ 1 — значение transparent
Если вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:
Color: transparent;
Такой текст нельзя будет увидеть на странице.
Способ 2 — цветовой режим rgba
А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:
Background: rgb(230, 121, 156);
Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.
Background: rgba(0, 0, 0, 0);
В таком случае остальные 3 цифры особой роли не играют.
Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в , можете ознакомиться, если интересно.
Способ 3 — opacity
Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .
В общем-то, на данный момент это все известные мне способы задания прозрачного цвета в css. Зачем это нужно, это уже другой вопрос. Через прозрачный фон может быть видно то, что находится под ним. Иногда так нужно сделать по дизайну. В целом, прием с полупрозрачностью сегодня очень распространен.
Размер фоновой картинки
Свойство background-size устанавливает размеры фоновой картинки. Оно определяет
не размер фона, а именно размер изображения. Размеры фона зависят от размеров блока. А свойство
background-size влияет на картину, которая становится фоном. Значение свойства
можно указать в единицах измерения CSS или процентах.
Сначала пишется ширина и через пробел высота. Если не соблюсти
пропорции ширины и высоты, то изображение искажается.
Также у свойства background-size есть такие значения:
background-size: auto — если указано только это значение, то изображение
имеет свои реальные размеры. Если один из размеров задан в единицах измерения, то второму размеру можно
указать auto, чтобы у картинки были правильные пропорции.
background-size: cover — картинка заполняет весь фон, сохраняя пропорции.
background-size: contain — вся картинка отображается в фоне.
Значения cover и contain есть также у
свойства object-fit. В теме про него эти значения
рассмотрены более подробно.
Укажем размер фоновой картинке:
| 25 |
background-size: 480px 280px; |
PNG в качестве фона
В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.
Рис. 1. Изображение для создания фона
После чего добавляем рисунок в качестве фона через свойство background, как показано в примере 1.
Пример 1. Использование полупрозрачного рисунка
XHTML 1.0CSS 2.1IECrOpSaFx
Результат данного примера показан на рис. 3.
Рис. 2. Применение фонового рисунка
Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.
Приведенный метод имеет ряд ограничений. Так, при отключении картинок в браузере, фон исчезнет вообще. К тому же не так легко изменить цвет фона и значение прозрачности, для этого придется опять редактировать изображение.
Использование css-свойства opacity
Opacity является универсальным инструментом, и с его помощью вы можете задать желаемый уровень прозрачности в css как для любого элемента на странице, так и для фона.
Синтаксис свойства css:
opacity: значение;
где значение указывается в диапазоне от 0.0 (элемент полностью прозрачен) до 1.0 (элемент абсолютно не прозрачен).
Итак, для примера сделаем блок с классом fon, и для него зададим, для наглядности, фоновое изображение. В этом блоке разместим два блока с текстом opas1 и opas2, для которых зададим черный фон. После чего для второго блока зададим значение opacity равное 0.3.
Вот что получится:
Блок без прозрачности
Демонстрация работы свойства css opacity
HTML-код примера:
XHTML
<div class=»fon»>
<div class=»opas1″>
Блок без прозрачности
</div>
<div class=»opas2″>
Демонстрация работы свойства css opacity
</div>
<div>
|
1 |
<div class=»fon»> <div class=»opas1″> Блок без прозрачности <div class=»opas2″> Демонстрация работы свойства css opacity |
CSS-код:
CSS
.fon{
background:url(images/opacity1.jpg);
width:400px;
padding:30px;
margin:auto;
}
.opas1{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
margin:10px;
font-size:18px;
color:#fff;
}
.opas2{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
opacity:0.3; /* уровень прозрачности в css*/
margin:10px;
font-size:18px;
color:#fff;
}
|
1 |
.fon{ backgroundurl(images/opacity1.jpg); width400px; padding30px; marginauto; } .opas1{ width300px; padding30px; background#000; marginauto; text-aligncenter; margin10px; font-size18px; color#fff; } .opas2{ width300px; padding30px; background#000; marginauto; text-aligncenter; opacity0.3;/* уровень прозрачности в css*/ margin10px; font-size18px; color#fff; } |
Как видите, свойство css сработало, блок с классом opas2 стал прозрачным и через него проглядывается фоновое изображение.
Но здесь есть один неприятный момент. Как вы могли заметить, текст потускнел, то есть он тоже стал прозрачным. Это произошло из-за того, что все дочерние элементы блока, в нашем случае – текст, унаследовали прозрачность заданную в css.
Получается, что данное css-свойство мы можем использовать для придания прозрачности блоку на странице только в том случае, если он не содержит никакого текста.
А что же делать, если нам нужно задать в css прозрачность фона для блока, но при этом сохранить читабельность содержащегося в нем текста?
Как изменить фон в презентации?
Для форматирования фона используются разные виды заливок, изображений и текстур. Рассмотрим, как поменять фон в презентации PowerPoint 2016, используя вышеперечисленные возможности.
Применение сплошной заливки
- Кликните правой кнопкой мыши по слайду.
- В появившемся меню нажмите «Формат фона».
- Выберите опцию «Сплошная заливка».
- Нажмите «Цвет» и выберите требуемый оттенок. С помощью опции «Другие цвета» можно создать собственный цвет. Для этой цели используется вкладка «Спектр».
- Прозрачность фона можно изменить, перемещая одноименный ползунок от 0 % (стоит по умолчанию) до 100 % (абсолютная прозрачность).
- Чтобы применить созданный фон ко всей презентации, нажмите «Применить ко всем». Если кликнуть «Закрыть», фон будет применен только к выбранному слайду.
Применение градиентной заливки
Для создания фона, предполагающего плавный переход одного цвета в другой можно использовать два подхода. Первый предполагает использование готовых градиентов, а второй – самостоятельную настройку цветовой схемы градиента. Первый вариант включает следующие шаги.
- Щелкните по слайду правой кнопкой мыши.
- Нажмите «Формат фона» > «Градиентная заливка».
- Кликните «Предустановленные градиенты» и выберите один из предложенных вариантов.
- Укажите требуемое значение параметров «Прозрачность» и «Яркость».
Если есть необходимость в создании собственных цветовых градиентов, воспользуйтесь следующей инструкцией.
- В поле «Точки градиента» отметьте первую точку.
- Выберите «Цвет темы» или «Стандартный цвет».
- Для настройки площади градиента используйте точки градиента. Их можно перетаскивать. Для этой же цели предназначено поле «Положение».
Чтобы текст больше выделялся, можно задать для фона другой градиент.
Совет! Работу над внешним видом презентации во многом облегчает наличие в PowerPoint встроенных тем. Тема – это макет слайда, который состоит их сочетающихся между собой цветов, шрифтов и специальных эффектов. Используя встроенные темы, вы сможете существенно сократить время работы над оформлением презентации. Это также великолепный источник вдохновения для создания собственных шаблонов.
Использование изображения в качестве фона
Фоном может служить логотип компании или любая другая картинка. Перед тем как сделать картинку фоном в PowerPoint, подумайте, насколько уместным будет выбранное изображение. Дополнительный визуальный шум может усложнить процесс восприятия презентации. Если же вы уверенны в необходимости использования картинки в качестве фона, то воспользуйтесь следующим алгоритмом действий.
- Выберите изображение, ориентация которого соответствует ориентации слайда. Если ориентация картинки будет отличаться от формы слайда, внешние части изображения могут пересечь границы слайда.
- Откройте слайд, фон которого хотите изменить.
- На вкладке «Конструктор» кликните «Формат фона».
- В меню «Формат фона» выберите «Рисунок или текстура».
- В разделе «Добавить рисунок из источника» щелкните «Файл».
- Выберите картинку и нажмите «Вставить». Отличным источником качественных изображений для фона является собственный организатор PowerPoint.
- Откройте «Формат фона» и настройте прозрачность, перемещая одноименный ползунок.
- Чтобы добавить фоновое изображение на все слайды презентации, нажмите «Применить ко всем».
- Сохраните изменения, нажав «Файл» > «Сохранить».
Совет! Создавая фон, не пренебрегайте параметром «Прозрачность»
Яркое фоновое изображение будет отвлекать внимание аудитории и препятствовать нормальному восприятию информации, представленной на сладах
Вышеописанная инструкция заполнит изображением весь фон слайда. Но это не значит, что размер картинки нельзя менять. Для этой цели в программе предусмотрен параметр «Смещение». В то время как параметр «Преобразовать рисунок в текстуру» позволяет задать повторение картинки по всему фону.
Если вставить картинку на слайд обычным способом, а затем растянуть её до размера фона, возникает риск смещения изображения, что может негативно повлиять на дизайн презентации.
Созданный фон для презентации PowerPoint стоит сохранить, чтобы в дальнейшем использовать его в качестве шаблона. Не стоит забывать и о доступных для скачивания бесплатных фонах.
