Фон css

CSS свойство Background

От автора: в данной статье мы с вами рассмотрим одно из старейших и известных свойств css background. Про особенности данного свойства часто забывают. В CSS3 оно получило обновление, были добавлены возможности не только по добавлению фонового изображения или цвета. Рассмотрим некоторые из них!

Смещение background position

Позиционирование фонового рисунка довольно простой процесс, с которым вы, скорее всего, уже знакомы. Если мы хотим прижать фон к нижнему правому углу элемента, мы пишем background-position: bottom right. К примеру:

Или сокращенный вариант background, все значения указываются после url:

С выходом CSS3 мы теперь можем задавать смещение позиции; точное расстояние до заданной позиции. В нашем примере bottom right мы можем добавить bottom 20px right 30px, и наш фон будет смещен на 20px от нижней границы и на 30px от левой.

Позиционирование (bottom, top, right, left) можно задавать в любом порядке, однако длина смещения задается четко после каждого значения.


Несколько фоновых изображений

Свойство background позволяет добавлять несколько фоновых изображений. Давайте добавим в демо выше несколько новых гаджетов и вещей.

Все эти изображения мы записали в одном свойстве background или background-image, отделив каждое запятой. Для расположения каждого изображения мы воспользовались свойством background-position, которое также может принимать несколько значений.

Можно использовать фиксированные единицы измерения (px), гибкие (проценты) или их комбинацию. Каждая пара значений это координаты от левого верхнего угла контейнера до левого верхнего угла изображения. К примеру, верхний левый угол камеры расположен на 280px от верхней границы контейнера и на 7% доступной ширины от левой границы.

Фон css

Заметка: Доступная ширина это вся ширина контейнера минус ширина фонового изображения. Именно поэтому фоновое изображение со значением позиционирования 50% по ос Х расположено точно по центру!


Фон css

Движение

Так как background-position поддается анимации, мы можем создать более живое фоновое изображение:

В коде мы задали несколько keyframes анимаций. В каждой отдельной анимации мы изменяем значения background-position-x и background-position-y для каждого изображения. Созданная мной анимация не так хороша, так что можете зайти на CodePen и подправить ее! Замечание: Чтобы увидеть анимацию, нажмите на кнопку Rerun внизу справа.

Пара важных замечаний

Все фоновые рисунки добавляются последовательно; самое первое изображение в списке находится наверху стека, а последнее в самом низу.

Все дополнительные background свойства (background-repeat, background-size, background-position и т.д.) могут задаваться несколько раз кроме background-color. Если мы прописываем несколько фоновых рисунков с помощью сокращенного свойства background, добавляйте цвет фона к самому последнему, чтобы он сработал. К примеру:


Или можете добавить отдельное свойство background-color сразу после сокращения:

Оба варианта делают то же самое, но последний мне кажется более интуитивным и читаемым.

Смешение фоновых изображений

Свойство background-blend-mode работает точно так же, как в графических редакторах Photoshop или Gimp; оно смешивает фоновые изображения в одно. Учитывается также слой под изображениями.

Свойство background-blend-mode принимает похожие значения, такие как overlay и multiply, а также и другие. Все значения Jonathan Cutrell объясняет в своей статье на эту тему. Настойчиво рекомендую вам прочесть данную статью, чтобы мы смогли перейти сразу к примерам.

Для создания яркого дизайна CSS Blend Mode можно использовать несколькими путями. Можно смешивать градиент с обычным изображением, как это делает Ian Yates в своей статье.

Для создания такого эффекта мы взяли фоновое изображение и градиент и применили режим наложения overlay.

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

Обрезка фонового изображения

Свойство background-clip это утилита, которая контролирует то, как фоновое изображение или цвет располагаются внутри CSS content box. Так же как и свойство box-sizing, background-clip принимает три значения:


Один практический пример, когда мне понадобилось свойство background-clip, это когда мне нужно было создать кнопку с иконкой с помощью одного элемента. В демо ниже фоновое изображение растягивается от левого до правого края элемента, даже если с каждой стороны добавить паддинг. Такого эффекта можно достичь, если задать значение border-box.

Если нам понадобится добавить белое пространство вокруг иконки, нам нужно обернуть иконку в дополнительный контейнер и задать ему паддинг. В background-clip мы можем сделать это более элегантно, задав значение content-box, а паддинг заменить рамкой того же цвета, как и фон.


Заключение

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

Последнее замечание: браузеры превосходно поддерживают данные свойства (кроме background-blend-mode). По данным сайта CanIUse множественный фон поддерживается в IE9 и выше с небольшими проблемами. Различные опции с фоновыми изображениями, такие как свойство background-clip, также поддерживаются с примечаниями.

Blending Mode на момент написания статьи лучше всего поддерживался в Chrome, Opera и частично в Safari с некоторыми багами. К сожалению в Microsoft Edge признаков прогресса не наблюдается.

Фон css

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Фон css

webformyself.com

Background-color

Задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:

Background-image


Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

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

Background-size

Определяет размер фонового изображения.

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

Background-repeat

Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

  • background-repeat: repeat-x — изображение повторяется только по горизонтали
  • background-repeat: repeat-y — изображение повторяется только по вертикали
  • background-repeat: repeat — изображение повторяется по горизонтали и вертикали
  • background-repeat: no-repeat — изображение не повторяется

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

  • background-attachment: scroll — прокручивается вместе со страницей
  • background-attachment: fixed — при прокрутке фон остается неподвижным

Background-position

Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

  • в фиксированных единицах (пикселы, сантиметры)
  • в процентах
  • словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

Рассмотрим примеры:

  • background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
  • background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
  • background-position: right bottom — рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Например:

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

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

design-mania.ru

Композиция фонов

Фон css
Существует множество причин, по которым, вам вообще может потребоваться композиция нескольких изображений в фоне, среди них наиболее важные — это:

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

Могут быть и другие разумные причины 🙂

Классический подход

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

<div class="sample1">  <div class="sea">  <div class="mermaid"><div class="fishing"></div></div>   <div class="fish"></div>  </div> </div>

Блок с классом «fishing» внутри «mermaid» исключительно для демонстрационных целей.

Теперь немного стилей:

.sample1 .sea, .sample1 .mermaid, .sample1 .fishing {  height:300px;  width:480px;  position: relative; }   .sample1 .sea {  background: url(media/sea.png) repeat-x top left;  }   .sample1 .mermaid {  background: url(media/mermaid.svg) repeat-x bottom left; }   .sample1 .fish {  background: url(media/fish.svg) no-repeat;  height:70px;  width:100px;  left: 30px;  top: 90px;  position: absolute; }   .sample1 .fishing {  background: url(media/fishing.svg) no-repeat top right 10px; }

Результат:
Sample 1. Classic nested divs

В данном примере три вложенных фона и один блок с рыбками, расположенный рядом с «фоновыми» блоками. В теории, рыбок можно перемещать, например, с помощью JavaScript или CSS3 Transitions/Animations.

Кстати, в этом примере для ".fishing" используется новый синтаксис для позиционирования фона, также определенный в CSS3:

   
background: url(media/fishing.svg) no-repeat top right 10px;

На текущий момент он поддерживается в IE9+ и Opera 11+, но не поддерживается в Firefox 10 и Chrome 16. Так что пользователи последних двух браузов поймать рыбку пока не смогут.

Поехали дальше. Как упростить эту конструкцию?

Множественные фоны

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

<div class="sample2">  <div class="sea">   <div class="fish"></div>  </div> </div>

И соответствующие стили:

.sample2 .sea {  height:300px;  width:480px;  position: relative;  background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea.png");   background-position: top right 10px, bottom left, top left;  background-repeat: no-repeat, repeat-x, repeat-x ; }   .sample2 .fish {  background: url("media/fish.svg") no-repeat;  height:70px;  width:100px;  left: 30px;  top: 90px;  position: absolute; }

Для определения множественных изображений необходимо использовать правило background-image, перечисляя отдельные изображения через запятую. Дополнительными правилами, также списком, можно задать позиционирование, повторы и другие параметры для каждого из изображений. Обратите внимание на порядок перечисления изображений: слои перечисляются слева направо от самого верхнего к самом нижнему.

Результат полностью совпадает:
Sample 2. Using multiple backgrounds

Одним правилом

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

<div class="sample3">  <div class="sea"></div> </div>

Стили:

.sample3 .sea {  height:300px;  width:480px;  position: relative;  background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish.svg"), url("media/sea.png");   background-position: top right 10px, bottom left, 30px 90px, top left;  background-repeat: no-repeat, repeat-x ; }

Картинку с результатом приводить не буду — поверьте, она совпадает с двумя картинками выше. А вот на стили обратите внимание еще раз, особенно на «background-repeat» — согласно спецификации, если часть списка в конце пропущена, то браузер должен повторить указанный список нужное число раз, чтобы соответствовать количеству изображений в списке.

В данном случае, это эквивалентно такому описанию:

background-repeat: no-repeat, repeat-x, <mark>no-repeat, repeat-x</mark>;

Еще короче

Если вы помните CSS 2.1, в нем определена возможность описывать фоновые изображения в краткой форме. Как на счет множественных изображений? Это также возможно:

.sample4 .sea {  height:300px;  width:480px;  position: relative;  background: url("media/fishing.svg") top right 10px no-repeat,   url("media/mermaid.svg") bottom left repeat-x,  url("media/fish.svg") 30px 90px no-repeat,  url("media/sea.png") repeat-x;   }

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

Динамичные изображения

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

Кстати, вот пример из жизни — тема с одуванчиком в Яндексе:
Yandex
Если вы залезете в код, вы увидите там примерно следующее:

<div class=b-skin-bg sizcache="272" sizset="0"> 	<div class=b-fluff-bg sizcache="272" sizset="0"> 		<div class=b-fluff__sky sizcache="272" sizset="0"> 			<div style="background-position: 3244px 0px" class=b-fluff__cloud></div> 			<div style="width: 1200px" class=b-max-width sizcache="214" sizset="0"> 				<div class=b-fluff__placeholder sizcache="302" sizset="0"> 					<div style="bottom: 105px; display: none; left: 940px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="30"></div> 					<div style="bottom: 50px; display: none; left: 879px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="31"></div> 					<div style="bottom: 105px; display: none; left: 940px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="32"></div> 					... 				</div> 			</div> 		</div> 	</div> </div>

Блоки с классами «b-fluff-bg», «b-fluff__cloud» и «b-fluff__item» содержат фоновые изображения, накладывающиеся друг на друга. Причем фон с облаками постоянно прокручивается, а одуванчики летают по экрану.

Можно ли это переписать с использованием множественных фонов? В принципе, да, но при условии 1) поддержки этой возможности в целевых браузерах и… 2) читайте дальше 😉

Как добавить динамики множественным фонам? В такой ситуации оказывается удобным, что во внутреннем представлении браузер раскидывает отдельные параметры фоновых изображения по соответствующим правилам. Например, для позиционирования есть «background-position», и для сдвигов достаточно изменять только его. Однако имеется и плата за использование множественных изображений — в этом правиле (и любом аналогичном) необходимо перечислять позицию для всех фонов, заданных для вашего блока, и нельзя сделать это выборочно.

Чтобы добавить нашему фону с рыбками анимации, можно использовать такой код:

$(document).ready(function() {  var sea = $(".sample5 .sea")[0];  var fishesX = 30;  var fishesY = 90;  var fishX = 0;  var fishY = 0;  var mermaidX = 0;  var t = 0;   function animationLoop() {  fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0));  if(--fishesX < 0) fishesX = 480;  mermaidX += 0.5;  if(mermaidX > 480) mermaidX = 0;  fishY = -10 + (10 * Math.cos(t * 0.091));  fishX = 10 + (5 * Math.sin(t * 0.07));   sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left";   window.requestAnimFrame(animationLoop);  }  animationLoop(); });

где

window.requestAnimFrame = (function() {  return   window.requestAnimationFrame ||   window.msRequestAnimationFrame ||  window.mozRequestAnimationFrame ||   window.oRequestAnimationFrame ||   window.webkitRequestAnimationFrame ||   (function(callback) { window.setTimeout(callback, 1000 / 60); }); })();

Результат (видео):

Sample 5. Animating

И, кстати, анимации также можно делать через CSS3 Transitions/Animations, но это тема для отдельного обсуждения.

Паралакс и интерактив

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

Множественные фоновые изображения удобны в подобных сценариях, так как пока мы говорим только про фон (а не контент), их использование позволяет избежать замусоривания html-кода и DOM. Но за все приходится платить: я не могу обращаться к отдельным элементам композиции по имени, id, классу или какому либо другому параметру. О порядке элементов в композиции я должен явно помнить в коде и на каждое изменение любого параметра любого элемента фактически я должен склеивать строку, описывающую значения этого параметра для всех элементов, и обновлять ее для всей композиции.

sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left";

Уверен, что это можно обернуть в удобный код на javascript, который возьмет на себя виртуализацию взаимоотношений с отдельными слоями, оставляя при этом html-код страницы максимально чистым.

habr.com

Фоновый цвет

Свойство background-color задает цвет фона элемента.

Задается фоновый цвет страницы:

С помощью CSS, цвета чаще всего указываются:

  • по названию цвет — будет "red"
  • по значению RGB — будет "rgb(255, 0, 0)"
  • по значению HEX — будет "#ff0000"

Посмотреть цветовые значения CSS полный список возможных значений цвета.

В приведенном ниже примере элементы <h1>, <p>, и <div> имеют разные цвета фона:


Фоновое изображение

Свойство background-image указывает что изображение используется в качестве фона элемента.

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

Фоновое изображение для страницы можно задать:

Ниже приведен плохой пример сочетание текста и фона изображения. Текст плохо читается:


Фоновое изображение — повторение по горизонтали или по вертикали

По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.

Некоторые изображения должны повторяться только по горизонтали или по вертикали, либо они будут выглядеть странно, как это:

Если изображение повторяется только по горизонтали (background-repeat: repeat-x;), фон будет выглядеть лучше:


Фоновое изображение — установить позицию и без повторений

Показать фоновое изображение только один раз, также определяется свойствоbackground-repeat:

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

Положение изображения определяется свойством background-position:


Фоновое изображение — фиксированная позиция

Для того чтобы, зафиксировать фоновое изображения (не прокручивалось с остальной частью страницы), нужно использовать свойство background-attachment:


Фон — сокращеное свойство

Чтобы сократить код, можно также указать все свойства фона в одном свойстве. Это называется свойство сокращения.

Сокращенное свойство для фона background:

При использовании сокращенного свойства, устанавливается порядок значений свойств:

  • background-color (цвет)
  • background-image (изображение)
  • background-repeat (повторение)
  • background-attachment (вложение)
  • background-position (позиция)

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


Проверьте себя с помощью упражнений!

Упражнение 1 »  Упражнение 2 »  Упражнение 3 »  Упражнение 4 »  Упражнение 5 »


Все CSS свойства фона

Свойства Описание
background Задает все свойства фона в одной декларации
background-attachment Устанавливает, будет ли фоновое изображение фиксированным или прокручиваться с остальной частью страницы
background-color Устанавливает цвет фона элемента
background-image Задает фоновое изображение для элемента
background-position Задает начальное положение фонового изображения
background-repeat Устанавливает, как фоновое изображение будет повторяться

schoolsw3.com

Работа с фоном в CSS

С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега <body>. Рассмотрим все свойства, которые связаны с заданием фона.

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам <h1>, <p>, так и ко всему веб-сайту с помощью тега <body>.

Например:

background-image

Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

Например:

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

background-repeat

Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

Оно может иметь несколько значений:

  • background-repeat: repeat-x — повторение по горизонтали;
  • background-repeat: repeat-y — повторение по вертикали;
  • background-repeat: repeat — повторение и по горизонтали и по вертикали;
  • background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

  • background-attachment: scroll — фон прокручивается вместе со страницей;
  • background-attachment: fixed — фон остаётся неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left.

Например:

  • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
  • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

Плавный переход от одного цвета к другому, причем переходов допускается несколько.

Использование градиента можно наглядно продемонстрировать в примере кода:

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

Например:

Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

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

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

Относительное изменение размера

Если применять проценты, размер будет основываться не на изображении, а на элементе.

Например:

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

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

Масштабирование до максимального размера

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

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

Такой фон страницы будет автоматически подгоняться под любое разрешение:

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

Масштабирование сразу нескольких фонов

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

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

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

Пример создания полупрозрачного блока:

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

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

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

www.internet-technologies.ru

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

Вы можете задавать фон блока или всей страницы с использованием различных вариантов:

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

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

Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.

Для того чтобы в HTML сделать фон в виде цвета нужно к тегу для которого нам нужно задать фон дописать атрибут bgcolor

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

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

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

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

  2. 2.В файле, в котором вы задаёте CSS стили для вашего сайта, нужно дописать для этого класса свойство background с нужным значением фона.

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

Для задания цвета фона мы можем использовать несколько форматов:

  1. 1.Кодовое название цвета
  2. 2.Шестнадцатеричный формат:
  3. 3.Формат RGBA, позволяющий не только задавать цвет но и регулировать уровень прозрачности фона и таким образом сделать эффект прозрачного фона.

Уровень прозрачности задаётся в виде десятичного значения от 0 до 1, где 0 – полностью прозрачный, а 1 – не прозрачный.

Так же вы можете воспользоваться вот этим инструментом для подбора нужного цвета и определения его кода. Просто водите мышкой по палитре, подбираете цвет и справа отображается его значение в шестнадцатеричном формате (HEX) и в формате rgb.

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

Для этого нам нужно будет:

  1. 1.К себе на сайт в определённую папку с картинками загрузить изображение, которое мы хотим использовать в качестве фона.
  2. 2.Задать его в CSS

В скобочках указываем путь к картинке.

Так же если изображение у вас небольшое то будьте готовы увидеть такую картину:

Вы можете отключить повторение фона для маленьких изображений, дописав no-repeat:

Так же можно сделать чтобы он повторялся только по горизонтали:

Или только по вертикали:

Кроме того мы можем управлять расположением фонового изображения для элемента. Для этого нам нужно дописать следующе:

  • top – для выравнивание по верхнему краю
  • bottom — для выравнивания по нижнему краю
  • left – выравниваем по левому краю
  • right – по правому
  • center – выравниваем по центру (можно использовать как для выравнивания по горизонтали так по вертикали)

Так же можно сочетать эти выравнивания.

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

По умолчанию фоновое изображение не подстраивается под размер элемента. В эпоху адаптивных дизайнов это доставляет много неудобств. Для решения этой проблемы можно использовать свойство background-size.

  • background-size: 100% auto; — растянет изображение по горизонтали, а по вертикали размер будет увеличиваться пропорционально чтобы не искажалось изображение.
  • background-size: auto 100%; — растягивает по высоте, а по ширине размер пропорционально масштабируется.
  • background-size: 100% 100%; — растянет картинку по горизонтали и вертикали, при этом изображение может деформироваться.
  • background-size: contain; — изображение будет масштабироваться под размер блока насколько это возможно без искажения.
  • background-size: cover; — картинка масштабируется чтобы хотя бы одна из сторон была по размеру элемента и не искажалась.

Как изменить расположение фона внутри элемента?

Кроме описанных выше значений top, bottom, left, right и center мы так же можем использовать значения в пикселях, процентах и em чтобы выставить фоновую картинку так как нам нужно.

Воспользуемся свойством background-position:

Как сделать фон неподвижным при прокрутке?

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

Если нужно чтобы он прокручивался меняем fixed на scroll.

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

Для создания градиентного перехода задаём для нужного элемента свойство background со значением linear-gradient:

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

Так же можно задавать процентное соотношение цветов, направление градиента и так далее.

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

Возможности CSS3 позволяют нам одновременно задать в качестве фона для одного элемента цвет и картинку или несколько картинок.

Указываем сначала картинку, после чего ставим запятую и пишем цвет.

Для задания нескольких картинок указываем их через запятую.

При этом для каждого изображения вы можете задавать своё позиционирование.

Как сделать фон в HTML при помощи CSS?

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

Можно воспользоваться атрибутом style и задать фон прямо в HTML файле.

На этом у меня всё. Надеюсь что помогла вам разобраться с тем как сделать фон в HTML и CSS.

Буду рада видеть ваши комментарии! Успехов вам и до встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

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

Слава богу у нас для этого есть помощники:

  • no-repeat – запретить повтор
  • repeat-x – повторение рисунка только по горизонтали
  • repeat-y – повторение рисунка только по вертикали

Например:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("css-background-image-gradient.png");
  background-color: #white;
  background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Шапка блога</h1>
<p>Это фоновая текстура с повторением только по горизонтали</p>
</body>
</html>

Следующий помощник — свойство background-position, позволяет позиционировать фоновую картинку в любом месте экрана. Этот прием широко распространен в современном веб-дизайне. У нас есть картинка, но она не часть контента, а служит лишь как украшение сайта.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("css-background-image-02.jpg");
  background-color: #ebebec;
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Пример неповторяющегося фона с заданным позиционированием.</p>
<p>Картинка отображается только один раз и находится справа.</p>
<p>Задан отступ от правого края в 200 px во избежании наезда текста на фон.</p>
</body>
</html>

Если мы хотим, чтобы картинка всегда была видна при прокрутки экрана вниз, надо добавить в код выше свойство — background-attachment: fixed;

В чем разница между img и background-image?

Разница принципиальная, тег img вставляется непосредственно в тело HTML-страницы и отвечает за содержание (иллюстрации, фотографии, аватарки), несет смысловую нагрузку. Очень важно, чтобы картинка была проиндексирована поисковыми системами и попала в поисковую выдачу. Свойства CSS background-image – делают сайт уникальным и красивым, то есть это оформление, которое следует выносить во внешний файл CSS стилей или использовать внутри элемента style.

Конечно, это не значит, что background-image не будет работать, если его поместить в тело HTML-страницы. Но я настоятельно рекомендую все, что касается дизайна выносить в CSS. В результате мы получим чистый HTML-код:

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

Ну вот мы и рассмотрели более-менее все варианты с использованием свойства CSS background-image. Побольше практики друзья! Смело копируйте код и придумывайте свои варианты!

myrusakov.ru

Виталий Зданевич
Спасибо большое, Наталья, но я ничего не понимаю…

Какой же мне код написать в блок Блоггера, чтобы Клац — белый фон! Клац снова — обратно черный!

NMitra
В код

<body class='loading'>

добавляем

<body class='loading' id="fon">

В гаджет HTML/JavaScript

<input onclick="getElementById('fon').style.backgroundColor='#fff';" type="button" value="белый цвет" />

NMitra
Или ещё интересней. id для body также необходим. А в гаджет добавляем

<style type='text/css'>
.elementoVisible {background: #fff;}
.linkContraido {
     cursor: pointer;
     background: #FFF;
     
}
.linkExpandido {
     cursor: pointer;
     background: #000;
  }
</style>

<script type='text/javascript'>
     function desplegarContraer(cual,desde) {
          var elElemento=document.getElementById(cual);
          if(elElemento.className == 'elementoVisible') {
               elElemento.className = 'body';
               desde.className = 'linkContraido';
          } else {
               elElemento.className = 'elementoVisible';
               desde.className = 'linkExpandido';
          }
}
</script>
<div onclick="desplegarContraer('fon',this);" class="linkContraido">TEXTO</div>

NMitra
Образец — http://prilozhenie5.blogspot.com/ (несколько примитивный, но даёт понять суть)

фон тёмный — кнопка белая

щелчок

фон белый — кнопка тёмная

Виталий Зданевич
Так этот код меняет только фон вне колбасы основной части блога (как в примере)? А чтобы весь фон менялся, колбаса и основной?
NMitra
Вот этот участок должен выглядеть как:

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#292929"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="transparent"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
   </Group>

Перед ]]></b:skin> внести

.post-outer { background-color: transparent; }

Виталий Зданевич
Столько кода — я совершенно ничего не понимаю… Это разные варианты или исправления?..

Что же писать в темплейт и что-же — в гаджет?.. Мол:

В темплейте между X и Y пишем:

xxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx

В код нового гаджета пишем:

xxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx

NMitra
Комментарий 6 — изменения в "Дизайн"-"Изменить HTML".

Комментарий 2 — там же добавляем id="fon" в body.

Комментарий 3 — вносим код в новый гаджет HTML/JavaScript.

Виталий Зданевич
Там же это перед ]]> ?
Виталий Зданевич
съелся тег

] ] > < / b : s k i n >

NMitra
Там же — это в "Дизайн"-"Изменить HTML".
NMitra
Для того, чтобы и менялся текст:

<style type='text/css'>
.elementoVisible {background: #fff;}
.linkContraido {
     cursor: pointer;
     background: #FFF;padding-top: 10px;
     display: block; width: 170px; height: 20px;
width: 170px;
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;

font: bold 15px/10px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #000;
text-shadow: 0px 1px 2px #b4d1ad;

-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
.linkExpandido {
     cursor: pointer;padding-top: 10px;
     background: #000;
 display: block; width: 170px; height: 20px;
width: 170px;
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;

font: bold 15px/10px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #fff;
text-shadow: 0px 1px 2px #b4d1ad;

-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out; }
.elementoVisibleheader {background: #000;}</style>

<script type='text/javascript'>
     function desplegarContraer(cual,desde) {
          var elElemento=document.getElementById(cual);
          if(elElemento.className == 'elementoVisible') {
               elElemento.className = 'body';
               desde.className = 'linkContraido';
               desde.innerHTML = 'белый';
                   } else {
               elElemento.className = 'elementoVisible';
               desde.className = 'linkExpandido';
               desde.innerHTML = 'чёрный';
                      }
}

</script>
<div onclick="desplegarContraer('fon',this);" class="linkContraido">Сменить фон</div>

Наталка Михайлівна Зуб
Скажите пожалуйста, как поменять фон вкладок в меню. У меня меню белое, а нужно например такое #4682B4(блог темно синий и белое меню смотрится некрасиво). Когда я меняю его в background: #fff — получается фон простых менюшек синий, а многоуровневых — остается белый(причем фон выпадающих из них подменю синий). И еще вокруг меню белая окантовка остается, очень мешает. Можно ли её убрать?
NMitra
Покажите на скриншоте что вы хотите.
Наталка Михайлівна Зуб
Если бы я еще знала, что такое скриншот…
Наталка Михайлівна Зуб
В общем, я бы хотела сделать меню, как описано здесь:http://www.portal-sayt.my1.ru/publ/vertikalnoe_menju_92_navigacija_sajta/1-1-0-16. Но здесь оно белое, а мне нужно например синее (под мой блог http://revival2012nataliz.blogspot.com), белое не смотрится.Как это сделать? И можно ли убрать окантовку меню(оно остается белым).
NMitra
Удалите
border: 1px solid rgb(140, 140, 140);
Замените
.suckerdiv ul li a{
background: #4682B4;
}
Наталка Михайлівна Зуб
Это нужно заменить в коде меню? Я там заменила, но все осталось как было.
NMitra
http://rezultat-blog.blogspot.ru/
Первая статья тестового блога.
Наталка Михайлівна Зуб
ОГРОМНОЕ ВАМ СПАСИБО!!!!!!! Вы просто даже не представляете, как вы мне помогли!БОЛЬШОЕ БОЛЬШОЕ СПАСИБО ТЫСЯЧУ РАЗ!!!!!!!!!!!!
Наталка Михайлівна Зуб
Последний вопрос — его можно вставить как гаджет, или только через шаблон. Как лучьше?
NMitra
HTML код в гаджет HTML/JavaScript. Стиль CSS в соответствующее поле "Дизайнера шаблонов" — http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html
NMitra
Но такой код я бы весь внесла в гаджет.
Наталка Михайлівна Зуб
Спасибо еще раз. Я действительно наверное весь код внесу в гаджет, а то у меня там в шаблоне уже столько всего внесено, что потом не разберешься.
Наталка Михайлівна Зуб
Блин, ну я тупая. Все сделал, заменила в коде меню все ссылки на свои, свои названия. Все работает, кроме выдвигающихся подменюшек(они не выдвигаются их не видно).Там еще не знаю какой адрес ссылки нужно в этом месте:"subfolderstyle" href="http://forever-web.ru/load/12" Программы И ЗДЕСЬ "subfolderstyle" href="http://forever-web.ru/load/1" Все для uCoz(Это пункты меню,кот.с подменю)
NMitra
Ваши любые ссылки.
Юрий
Наташа, уже несколько раз сталкивался с проблемой адаптивного background, но пока не нашел достойного способа решения. Суть в том, что при прописывании background-size: 100% auto (или background-size: 100% 100%) при уменьшении ширины экрана изображение пропорционально уменьшается. Но… При этом оно "уезжает" вверх (срабатывает автоматически определяемая высота auto). Если background — фон всего шаблона, то особых проблем нет. Другое дело, если background — это баннер в хедере. Тогда между ним и нижележащей секцией при сужении экрана образуется огромный промежуток. Как от него избавиться средствами css?
Пока что знаю только один способ: сделать несколько дополнительных изображений соответстующего размера и прописать пути к этим картинкам посредством медиа запросов для разных разрешений мониторов. Но этот вариант отнимает прилично времени, т.к. приходится еще позиционировать background. Может существует более простой вариант?
NMitra
Живой пример нужен, сделайте на странице все изменения, отпишитесь в комментариях куда смотреть. Таких проблем в общем-то не должно быть, особенно если указывать background-position
Юрий
Наташа, добрый день. Вот ссылка на заготовку этой темы:
http://test.a-cont.ru/?themedemo=Cipriano
Чтобы было нагляднее, шаблон разместил на сайте третьего уровня.
NMitra
Надо пропорционально изменять размеры .pizza_main2

<div class="pizza_main2"></div>

.pizza_main2 {
width: 100%;
padding-top: 40%;
background: url(http://4.bp.blogspot.com/-Nq5KPM8uNjk/UFbSS3v0Z5I/AAAAAAAADNQ/3MxRKB-jfqo/s00/parovozik.jpg) no-repeat;
background-size: 100% auto;
}

Подробнее http://shpargalkablog.ru/2012/06/kartinka-po-razmeru-ekrana-css.html#video Верно я поняла проблему?

NMitra
width: 100%; не обязательно писать
Юрий
Наташа, .pizza_main1 и .pizza_main2 — это два изображения, наложенные друг на друга.
.pizza_main2 — прозрачная (opacity: 0;).
При наведении курсора это изображение появляется (:hover {opacity: 1;}). Тут все нормально.
Дело в том, что при уменьшении ширины экрана образуется большой разрыв между баннером и нижележащей секцией, озаглавленной "Наши преимущества". Как избежать появление этого промежутка просто не знаю…
NMitra
Сделайте для них одну обёртку, а .pizza_main1 и .pizza_main2 рассчитайте в процентах от обёртки
Юрий
Спасибо! Буду пробовать…
Юрий
Наташа, спасибо большое за ваши советы. Воспользовался инфой с вашего предыдущего комментарии (где упоминается padding-top: 40%). Сначала не смог понять, для чего он нужен. Оказалось, что с его помощью изображение как раз и адаптируется.
Прописал для изображения
:before
content: "";
display: block;
width: 100%;

а затем
background-size: cover;
padding-bottom: 56.25%
В итоге все получилось.
Еще раз большое спасибо!

Pashok927
Здравствуйте Наталья,делаю сайт,мне хотелось бы реализовать на своем сайте как бы 2 фона:что бы первый фон был картинкой сверху ,а потом плавно переливался в какой-нибудь цвет,примерно как реализовано здесь -http://www.igromania.ru/
Буду благодарен за помощь в реализации.
NMitra
Здравствуйте, картинка тяжёлая, поэтому её подгружают в последнюю очередь, например, с помощью window.onload. В Фотошопе когда сохраняете картинку, то ставьте галку Interlaced — будет плавная загрузка.
NMitra
То есть изначально стоит только background-color, а потом добавляют background-image. Пример того, как с помощью JavaScript можно поменять CSS http://shpargalkablog.ru/2013/08/appendchild-removechild-javascript.html#sozdat Только вам нужно не при клике, а при полной загрузки остальных элементов страницы.
Анонимный
Добрый день. Подскажите, пожалуйста, есть ли у Вас статья про CSS фильтры и их использование. CSS Filter blur родительский элемент передается. А как сделать чтобы на другие блоки свойство blur не передавалось?
NMitra
Добрый день. Толком не разбиралась, но ведёт себя как ожидается http://jsfiddle.net/NMitra/tqdfsytp/

img {
position: absolute;
left: 0;
-webkit-filter: opacity(.4) blur(5px);
filter: opacity(.4) blur(5px);
}

Анонимный
Спасибо большое за ответ. Нет ли возможности применить свойство blur к div с классом "one", а div'у с классом "two", что находится в предыдущем div'e убрать использование сво-ва blur.
div class="one"тест div class="two" еще текст /div
/div
.one{
width:500px;height:300px;background:gold;
-webkit-filter: opacity(.7) blur(5px);
filter: opacity(.7) blur(5px);
}
.two { width:300px;height:100px;background:black;
-webkit-filter: blur(0px);
filter: blur(0px);}
П.с. простите за тяжелый русский))
NMitra
Поняла как с opacity ( http://shpargalkablog.ru/2013/02/opacity-css.html )

Можно через вложенный div http://jsfiddle.net/NMitra/tqdfsytp/1/

<style>
#one {
position: absolute;
-webkit-filter: blur(5px);
filter: blur(5px);
}
</style>

<div>
<div id="one">раз раз раз</div>
<div id="two">два два два</div>
</div>

NMitra
Ещё забыла добавить
z-index: -1;
Муслим Гасанов
Спасибо. Вы очень помогли.

shpargalkablog.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector