Как добавить фон в css: background-image | htmlbook.ru

Содержание

Примеры для изменения цвета фона, текста с помощью CSS

Рассмотрим несколько примеров по изменению CSS:

 

Пример 1. Изменение фона.

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

 

Выбираем с помощью Firebug (кнопка F12) необходимый нам элемент:

 

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

 

Красной рамкой обведен код, который мы вставляем сейчас.  После сохранения цвет фона элемента изменился на выбранный нами:

 

Пример 2. Изменение цвета кнопки.

Изменим цвет кнопки «Обратный звонок». Мы хотим сделать так, чтобы изменился ее цвет до нажатия с оранжевого на изумрудный:

 

Выбираем необходимый элемент:

 

Добавляем код, который изменяет цвет кнопки до нажатия:

 

И, нажав на кнопку «Сохранить», смотрим на результат:

 

Пример 3.

Изменение шрифта.

Теперь изменим шрифт кнопки «Корзина товаров». Выбираем нужный нам элемент, ищем нужный участок кода:

 

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

И видим, как изменилась кнопка «Корзина товаров»:

 

Пример 4. Изменение стиля заголовков.

При редактировании заголовков не появляется поле визуального редактора, и изменить их цвет, размер и шрифт можно только с помощью CSS. Итак, выбираем заголовки и видим, что у класса «h3_content» нет определенного готового правила.

 

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

И после сохранения изменений посмотрим на изменившиеся заголовки:

 

Пример 5. Изменение стиля ссылок.

Ссылка может иметь несколько состояний. Например, есть посещенные и непосещенные ссылки, также можно задавать выделение ссылки курсором. Возьмем страницу с 3 ссылками, выделим ссылку курсором и в окне firebug в разделе «Стиль» нажмем на style.css?106(строка 165).

 

Как только мы кликнем на эту ссылку, раскроется файл style.css на 165 строке, и мы сможем увидеть, как описаны правила ссылок.

Псевдокласс link отвечает за непосещенные ссылки, visited — за посещенные. Псевдокласс hover срабатывает при наведении курсора. Изменим цвет непосещенных ссылок на зеленый, цвет посещенных — на красный, а при наведении цвет сделаем фиолетовым и уберем подчеркивание ссылки (за это отвечает правило text-decoration:none):

Теперь ссылки внешне выглядят совершенно по-другому:

 

Пример 6. Сдвиг и размер блоков.

За расстояние между элементами отвечает правило margin

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

Теперь запишем следующие изменения: увеличим padding до 100 пикселей и установим отступ margin сверху и слева по 50 пикселей:

Внешний вид элемента станет таким:

Теперь изменим ширину элемента. Выделяем нужный элемент:

 

и добавляем измененное правило для класса .right_block — уменьшим его ширину width на 200 пикселей:

 

Теперь блок стал заметно уже:

 

Пример 7. Рамки блоков.

Вы можете изменять границу блоков с помощью правила border — например, задавать закругление с помощью border-radius. Также в данном примере рассмотрим, как добавлять тень к элементу с помощью box-shadow. 

Поставим больше закругление у элемента — увеличим значение border-radius

до 50 пикселей, саму границу сделаем жирнее (5 пикселей) и сделаем ее зеленой, также добавим черную тень снизу и справа с помощью box-shadow:

Окончательно элемент будет выглядеть так:

 

Пример 8. Скрыть элемент.

Вы можете скрыть любой элемент с помощью правила display: none. В качестве примера скроем надпись в футере сайта:

Добавим в CSS-редактор правило для класса footer_text, изменив значение параметра display:

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

 

Пример 9. Заменить логотип.

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

Так логотип выглядел до изменений:

 

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

После внесения данных правил логотип выглядит следующим образом:

Как установить цвет фона CSS для HTML с помощью JavaScript

Изменение CSS

HTMLElement

Вы можете изменить большинство свойств CSS с помощью JavaScript, используйте этот оператор:

document.querySelector(<selector>).style[<property>] = <new style>

где <selector>, <property>, <new style>все Stringобъекты.

Обычно свойство стиля будет иметь то же имя, что и фактическое имя, используемое в CSS. Но если слов больше одного, это будет верблюжий падеж: например background-color, заменяется на backgroundColor.

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

documentquerySelector('#container').style.background = 'red'

Вот быстрая демонстрация, меняющая цвет коробки каждые 0,5 с:

colors = ['rosybrown', 'cornflowerblue', 'pink', 'lightblue', 'lemonchiffon', 'lightgrey', 'lightcoral', 'blueviolet', 'firebrick', 'fuchsia', 'lightgreen', 'red', 'purple', 'cyan'] let i = 0 setInterval(() => { const random = Math.floor(Math.random()*colors.length) document.querySelector('.box').style.background = colors[random]; }, 500)
.box {
  width: 100px;
  height: 100px;
}
<div></div>

Изменение CSS нескольких

HTMLElement

Представьте, что вы хотите применить стили CSS более чем к одному элементу, например, сделать цвет фона всех элементов именем класса box lightgreen. Тогда ты можешь:

  1. выберите элементы с помощью .querySelectorAllи разверните их в объект Arrayс синтаксисом деструктуризации :

    const elements = [...document.querySelectorAll('.box')]
  2. перебрать массив с помощью .forEachи применить изменение к каждому элементу:

    elements.forEach(element => element.style.background = 'lightgreen')

Вот демо:

const elements = [...document.querySelectorAll('.box')]
elements.forEach(element => element.style.background = 'lightgreen')
.box {
  height: 100px;
  width: 100px;
  display: inline-block;
  margin: 10px;
}
<div></div>
<div></div>
<div></div>
<div></div>

Другой способ

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

Предполагая, что вы можете заранее подготовить стили в CSS, вы можете переключать классы, обращаясь classListк элементу и вызывая toggleфункцию:

document.querySelector('.box').classList.toggle('orange')
.box {
  width: 100px;
  height: 100px;
}

.orange {
  background: orange;
}
<div></div>

Список свойств CSS в JavaScript

Вот полный список:

alignContent
alignItems
alignSelf
animation
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationName
animationTimingFunction
animationPlayState
background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
backgroundClip
backgroundOrigin
backgroundSize</a></td>
backfaceVisibility
borderBottom
borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomStyle
borderBottomWidth
borderCollapse
borderColor
borderImage
borderImageOutset
borderImageRepeat
borderImageSlice
borderImageSource  
borderImageWidth
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRadius
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderSpacing
borderStyle
borderTop
borderTopColor
borderTopLeftRadius
borderTopRightRadius
borderTopStyle
borderTopWidth
borderWidth
bottom
boxShadow
boxSizing
captionSide
clear
clip
color
columnCount
columnFill
columnGap
columnRule
columnRuleColor
columnRuleStyle
columnRuleWidth
columns
columnSpan
columnWidth
counterIncrement
counterReset
cursor
direction
display
emptyCells
filter
flex
flexBasis
flexDirection
flexFlow
flexGrow
flexShrink
flexWrap
content
fontStretch
hangingPunctuation
height
hyphens
icon
imageOrientation
navDown
navIndex
navLeft
navRight
navUp>
cssFloat
font
fontFamily
fontSize
fontStyle
fontVariant
fontWeight
fontSizeAdjust
justifyContent
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
minHeight
minWidth
opacity
order
orphans
outline
outlineColor
outlineOffset
outlineStyle
outlineWidth
overflow
overflowX
overflowY
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
pageBreakInside
perspective
perspectiveOrigin
position
quotes
resize
right
tableLayout
tabSize
textAlign
textAlignLast
textDecoration
textDecorationColor
textDecorationLine
textDecorationStyle
textIndent
textOverflow
textShadow
textTransform
textJustify
top
transform
transformOrigin
transformStyle
transition
transitionProperty
transitionDuration
transitionTimingFunction
transitionDelay
unicodeBidi
userSelect
verticalAlign
visibility
voiceBalance
voiceDuration
voicePitch
voicePitchRange
voiceRate
voiceStress
voiceVolume
whiteSpace
width
wordBreak
wordSpacing
wordWrap
widows
writingMode
zIndex

Как установить цвет фона CSS HTML с помощью JavaScript

Изменение CSS для

HTMLElement

Вы можете изменить большинство свойств CSS с помощью JavaScript, используйте этот оператор:

 document.querySelector(<selector>).style[<property>] = <new style>
  

где <selector> , <property> , <new style>

— все объекты String .

Обычно свойство style будет иметь то же имя, что и фактическое имя, используемое в CSS. Но всякий раз, когда существует более одного слова, это будет случай верблюда: например, background-color изменяется на backgroundColor .

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

 documentquerySelector('#container').style.background = 'red'
  

Вот небольшая демонстрация изменения цвета окна каждые 0,5 с:

 colors = ['rosybrown', 'cornflowerblue', 'pink', 'lightblue', 'lemonchiffon', 'lightgrey', 'lightcoral', 'blueviolet', 'firebrick', 'fuchsia', 'lightgreen', 'red', 'purple', 'cyan']

let i = 0
setInterval(() => {
  const random = Math.floor(Math.random()*colors.length)
  document.querySelector('.box').style.background = colors[random];
}, 500)  
 .box {
  width: 100px;
  height: 100px;
}  
 <div></div>  

Изменение CSS нескольких

HTMLElement

Представьте, что вы хотите применить стили CSS к нескольким элементам, например, сделать цвет фона всех элементов с именем класса box lightgreen . Тогда вы можете:

  1. выберите элементы с помощью .querySelectorAll code> и разверните их в объекте с помощью синтаксис деструктурирования :

     Array  
  2. переберите массив с помощью const elements = [...document.querySelectorAll('.box')] и примените изменения к каждому элементу:

     .forEach  

Вот демоверсия:

 elements.forEach(element => element.style.background = 'lightgreen')
  
 const elements = [...document.querySelectorAll('.box')]
elements.forEach(element => element.style.background = 'lightgreen')  
 .box {
  height: 100px;
  width: 100px;
  display: inline-block;
  margin: 10px;
}  

Другой метод

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

Предполагая, что вы можете заранее подготовить стили в CSS, вы можете переключать классы, открывая <div></div> <div></div> <div></div> <div></div> элемента и вызывая функцию classList :

 toggle  
 document.querySelector('.box').classList.toggle('orange')  
 .box {
  width: 100px;
  height: 100px;
}

.orange {
  background: orange;
}  

Список свойств CSS в JavaScript

Вот полный список:

 <div></div>  alignItems
alignSelf
animation
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationName
animationTimingFunction
animationPlayState
background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
backgroundClip
backgroundOrigin
backgroundSize</a></td>
backfaceVisibility
borderBottom
borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomStyle
borderBottomWidth
borderCollapse
borderColor
borderImage
borderImageOutset
borderImageRepeat
borderImageSlice
borderImageSource
borderImageWidth
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRadius
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderSpacing
borderStyle
borderTop
borderTopColor
borderTopLeftRadius
borderTopRightRadius
borderTopStyle
borderTopWidth
borderWidth
bottom
boxShadow
boxSizing
captionSide
clear
clip
color
columnCount
columnFill
columnGap
columnRule
columnRuleColor
columnRuleStyle
columnRuleWidth
columns
columnSpan
columnWidth
counterIncrement
counterReset
cursor
direction
display
emptyCells
filter
flex
flexBasis
flexDirection
flexFlow
flexGrow
flexShrink
flexWrap
content
fontStretch
hangingPunctuation
height
hyphens
icon
imageOrientation
navDown
navIndex
navLeft
navRight
navUp>
cssFloat
font
fontFamily
fontSize
fontStyle
fontVariant
fontWeight
fontSizeAdjust
justifyContent
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
minHeight
minWidth
opacity
order
orphans
outline
outlineColor
outlineOffset
outlineStyle
outlineWidth
overflow
overflowX
overflowY
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
pageBreakInside
perspective
perspectiveOrigin
position
quotes
resize
right
tableLayout
tabSize
textAlign
textAlignLast
textDecoration
textDecorationColor
textDecorationLine
textDecorationStyle
textIndent
textOverflow
textShadow
textTransform
textJustify
top
transform
transformOrigin
transformStyle
transition
transitionProperty
transitionDuration
transitionTimingFunction
transitionDelay
unicodeBidi
userSelect
verticalAlign
visibility
voiceBalance
voiceDuration
voicePitch
voicePitchRange
voiceRate
voiceStress
voiceVolume
whiteSpace
width
wordBreak
wordSpacing
wordWrap
widows
writingMode
zIndex
> 

CSS3. Работа с множественными фонами

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

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

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

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

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

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


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

<div>
 <div>
 <div><div></div></div>               
 <div></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;
}

Результат:

В данном примере три вложенных фона и один блок с рыбками, расположенный рядом с «фоновыми» блоками. В теории, рыбок можно перемещать, например, с помощью 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>
 <div>                    
 <div></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, перечисляя отдельные изображения через запятую. Дополнительными правилами, также списком, можно задать позиционирование, повторы и другие параметры для каждого из изображений. Обратите внимание на порядок перечисления изображений: слои перечисляются слева направо от самого верхнего к самом нижнему.

Результат полностью совпадает:

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


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

<div>
 <div></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 (перемещать, прокручивать и т.п.)?

Кстати, вот пример из жизни — тема с одуванчиком в Яндексе:

Если вы залезете в код, вы увидите там примерно следующее:

 <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 class=b-fluff__cloud></div>
 <div class=b-max-width sizcache=»214″ sizset=»0″>
 <div class=b-fluff__placeholder sizcache=»302″ sizset=»0″>
 <div jQuery1328289994769=»30″></div>
 <div jQuery1328289994769=»31″></div>
 <div 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); });
})();

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

И, кстати, анимации также можно делать через 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-код страницы максимально чистым.

Что там с совместимостью?

Все современные версии популярных браузеров, включая IE9+, поддерживают множественные изображения (можно сверяться, например, с сaniuse).

Вы также можете использовать Modernizr, чтобы предоставлять браузерам, не поддерживающим множественные фоны, альтернативные решения. Как написал Chris Coyier в заметке о порядке слоев при использовании множественных фонов, делайте примерно так:

.multiplebgs body {
 /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */
}
.no-multiplebgs body {
 /* laaaaaame fallback */
}

Если вас смущает использование JS для предоставления обратной совместимости, вы можете просто дважды объявить background, правда, это тоже имеет свои минусы в виде возможной двойной загрузки ресурсов (это зависит от реализации обработки css в конкретном браузере):

/* multiple bg fallback */
background: #000 url(…) …;
/* Awesome multiple BG declarations that transcend reality and imsourcess chicks */
background url(…), url(…), url(…), #000 url(…);

Если вы уже начали думать о Windows 8 имейте в виду, что вы можете использовать множественные фоны при разработке metro style приложений, так как внутри используется тот же движок, что и в IE10.

Источник


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Как отличить контентное изображение от декоративного — Блог HTML Academy

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

Теория

Контентное изображение

Слово контент происходит от английского слова «content» — содержимое. С помощью таких изображений мы можем донести до пользователей полезную информацию. Чтобы добавить контентное изображение к себе на страницу, используйте в разметке <img>. Для изображений такого типа необходимо заполнять атрибут alt, который описывает то, что изображено на картинке.

Декоративное изображение

Из названия понятно, что этот тип изображений используется исключительно для оформления. Такие изображения не несут для пользователя полезной информации. Декоративные изображения следует реализовывать с помощью CSS.

Практика

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

Очевидные случаи

Изображение товара в карточке товара, контентное
Карточка товара на сайте EdoqueКарточки товаров на сайте Cadbury

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

Реализация: <img>

Логотип, контентное
Логотип на сайте Haribo-shopЛоготип на сайте EvercodelabПартнёрские логотипы на сайте Specia

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

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

Реализация: <img>

Изображения и текст, контентное
Изображение в статье на сайте MeduzaИзображения товара на индивидуальной странице на сайте PichShop

Примеры выше — изображения в статье. Данный случай ничем не отличается от карточки товара — у нас есть и описание, и изображение, несущие важную для пользователя информацию. Таким образом, изображение является контентным и должно быть сделано тегом <img>.

Реализация: <img>

Вспомогательная иконка, декоративное
Вспомогательные декоративные иконки на сайте MediaMarkt

В примере иконки в меню имеют декоративный характер. Если вдруг они пропадут, информация не потеряется, и пользователь всё равно сможет понять в какой раздел ему нужно. Для реализации лучше всего использовать background-image для псевдоэлемента.

Реализация: background-image для псевдоэлемента

Вспомогательные декоративные иконки на сайте MediaMarkt

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

Реализация: background-image для всего блока или для псевдоэлемента

Фоновое изображение, декоративное
Фоновая картинка с фруктами на сайте EdoqueПитерское фоновое изображение на сайте Sobor.gorozhanko.ru

На примерах выше мы можем рассмотреть варианты декоративных фоновых изображений. Для реализации лучше всего подойдёт background-image для всего блока.

Реализация: background-image для всего блока

Спорные моменты

Изображение в промослайдере
Слайдер на сайте Cadbury

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

Реализация: <img>

Слайдер на сайте S7

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

Реализация: background-image для всего блока

Карта с изображением
Карта в блоке с контактами. Макет Девайс.

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

Реализация: <img> (атрибут alt должен описывать изображение, в данном случае — Карта офиса по адресу улица Строителей, 15)

Иконки соцсетей
Социальные кнопки на сайте Haribo

Кнопки с социальными сетями представляют собой более интересный случай. С одной стороны, они являются декоративными, так как являются частью интерфейса сайта, однако, если их картинки не загрузятся — информация всё же пропадёт (пользователь будет не способен понять к какой социальной сети относится каждая ссылка). Таким образом, здесь применяется комплексный подход: внутри ссылки обязательно прописывается поясняющий текст. Изображение на этих кнопках-ссылках декоративные. Для доступного скрытия текста ссылки необходимо добавить класс .visually-hidden. Описание этого паттерна скрытия можно почитать в нашей статье. Таким образом, при потере CSS-файла, изображение пропадёт, а текст ссылки появится. При нормальной работе сайта пользователь увидит лишь изображение. Также необходимо не забывать про доступность — так как в разметке мы прописываем текст ссылки, то при чтении сайта скринридером, ссылки будут озвучены.

Реализация: background-image для ссылки

Вывод

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

Как добавить фоновые узоры в Squarespace

Зачем заменять фоновые изображения Squarespace узорами

Squarespace имеет большое значение для изображений — по замыслу. Достаточно взглянуть на демонстрационные примеры шаблонов. Каждая демонстрация разработана с использованием больших великолепных изображений. Хотя Squarespace все более и более углубляется в электронную коммерцию, другие платформы, такие как Shopify, здесь превосходят ее. Но для довольно статичных презентационных сайтов сильные стороны Squarespace проявляются. Вот почему в демоверсиях много белого пространства и они отодвинуты как можно дальше от тесноты прошлых лет.

Проблема с фоновыми изображениями

Но иногда фотография или другое изображение не является правильным выбором для баннера или фона в Squarespace. Для этого есть две основные причины.

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

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

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

Разыскивается: повторяющиеся фоны

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

Есть довольно много сайтов, предлагающих фоновые шаблоны CSS. Один из лучших — это Steve Schoger’s Hero Patterns, который предлагает коллекцию из более чем восьмидесяти повторяемых фоновых шаблонов SVG, совершенно бесплатно.Да, они повторяют , поэтому вам не нужно беспокоиться о размере или форме контейнера. Вы можете легко настроить непрозрачность, а также цвет переднего плана и фона, что упрощает интеграцию узоров в свои дизайны и цветовые палитры. И пользоваться ими несложно.

Во-первых, создайте шаблон

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

Я поигрался с ним и получил немного CSS, который я скопировал. Итак, давайте посмотрим, как он действует в блоке уценки.

Добавить фоновый узор в блок в квадратном пространстве

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

Создание полноэкранного видео фона HTML5 с помощью CSS

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

Видео, вероятно, лучший способ привлечь внимание.Хороший видео-фон может легко заставить людей остановиться и обратить внимание, увеличивая время, которое они проводят на сайте. Это увеличенное время на сайте потенциально может привести к большему взаимодействию с другим контентом на странице.

Снять эффект фонового видео довольно просто. На самом деле это можно сделать только с помощью CSS. CSS background и background-image Свойства принимают в качестве значений только цвета, градиенты, растровые изображения и SVG. Так что насчет видео?

Мы создаем простой элемент видео HTML5 с атрибутами loop, autoplay и muted и помещаем его в элемент контейнера.Изображение, используемое в атрибуте постера, при загрузке будет заменено первым кадром видео. Поэтому рекомендуется использовать первый кадр видео для изображения плаката.

Добавьте несколько простых строк CSS.

Теперь наш видеоэлемент имеет ширину и высоту области просмотра (окна нашего браузера). Это проблема, потому что в большинстве случаев соотношение сторон нашего видеоэлемента будет отличаться от соотношения сторон видеоисточника (в данном случае 16: 9).

Фон нашего видео в области просмотра, которая не соответствует соотношению сторон 16: 9.

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

Фон растянут, но не по центру.

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

Вот и все! У нас есть полноэкранный видео фон для нашего сайта!

Еще одна вещь, которую мы должны сделать, — это скрыть видео на мобильном устройстве и просто показать фоновое изображение. Это связано с тем, что большинство мобильных платформ не воспроизводят видео HTML5 автоматически и отображают его со встроенной кнопкой воспроизведения поверх нашего контента. В этом примере мы будем использовать то же изображение, которое используется для атрибута постера в видео. Имейте в виду, что использование display: none в элементе видео не помешает его загрузке.

Окончательный CSS

ДЕМО СТРАНИЦА

ПРИМЕЧАНИЕ: Видео, используемое в этой демонстрации, было взято по этой ссылке.

Больше сообщений о фоновых видео

— Советы по использованию фоновых видео в Интернете
— Создание полноэкранного списка воспроизведения фонового видео HTML5

Обновление статьи — 8 января 2016 г.

Когда я писал исходную статью, я пытался избежать использования CSS3-свойства преобразования , так как я знал, что оно не поддерживается в IE8.Одна вещь, которая тогда ускользнула от меня, заключалась в том, что видеоэлемент HTML5 также не поддерживается в упомянутом браузере.

Итак, разобравшись с IE8, давайте упростим CSS, используемый для создания полноэкранного видео-фона, с помощью преобразования CSS3 .

Как видите, мы удалили медиа-запросы с соотношением сторон и вместо этого использовали преобразование в нашем видеоэлементе (.fullscreen-bg__video). Поведение полноэкранного фонового видео остается таким же, как на этой ДЕМО СТРАНИЦЕ (которая имеет ту же разметку HTML, что и первая).

Этот новый код будет работать во всех основных браузерах. Как я уже сказал, это не будет работать в IE8, поскольку не поддерживает свойство преобразования CSS3. Но вам не о чем беспокоиться, поскольку IE8 также не поддерживает элемент видео HTML5. Поэтому, если вы не планируете использовать резервные варианты для элемента видео, используйте новый код.

Как изменить цвет фона таблицы HTML

Что нужно знать

  • Самый простой: добавьте свойство стиля background-color в тег таблицы, строки или ячейки.
  • Далее самый простой: используйте атрибут bgcolor .

В этой статье объясняются методы изменения цвета фона частей таблицы на веб-сайте.

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

Лучший способ изменить цвет фона — добавить свойство стиля background-color к тегу таблицы, строки или ячейки.

В этом примере изменяется цвет фона всей таблицы:

 

Чтобы изменить цвет отдельной строки, вставьте свойство background-color в

 

Вы можете изменить цвет отдельной ячейки, добавив атрибут в

 

Вы также можете применить цвета фона к заголовкам таблиц или

 

Изменение цвета фона с помощью таблиц стилей

Однако лучше избегать использования атрибута background-color в пользу правильно отформатированной таблицы стилей.Например, вы можете установить стили в таблице стилей в HEAD вашего HTML-документа или установить их во внешней таблице стилей. Подобные изменения в HEAD или внешней таблице стилей могут выглядеть следующим образом для таблиц, строк и ячеек:

таблица {цвет фона: # ff0000; } 
tr {цвет фона: желтый; }
td {background-color: # 000; }
class = «ql-syntax»>

Настройка цвета фона столбца

Лучший способ установить цвет фона для столбца — создать класс стиля, а затем назначить его ячейкам столбца.Создание класса позволяет вам назначать этот класс ячейкам в определенном столбце с помощью одного атрибута.

CSS :

td.ColColor {цвет фона: синий; } 
class = «ql-syntax»>

HTML :

 

ячейка 1 ячейка 2 ячейка 1 ячейка 2

class = «ql-syntax»>

Одним из значительных преимуществ управления цветами фона с помощью таблицы стилей является то, что вы можете изменить свой выбор цвета позже. Вместо того, чтобы просматривать HTML-документ и вносить изменения в каждую отдельную ячейку, вы можете внести одно изменение в выбор цвета в CSS, которое будет немедленно применяться к каждому экземпляру, где появляется синтаксис class = «ColColor» .

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

Как добавить цвет фона к текстовому блоку в Squarespace — Big Cat Creative


Первый метод…

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

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


Шаг 1. Идентифицируйте свой блок

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

Самый простой способ найти номер блока:

Если вы используете Google Chrome, загрузите это расширение Squarespace Block Identifier для Chrome. Это расширение разработано, чтобы помочь вам найти идентификационный номер блока для каждого блока на вашем сайте Squarespace.

Откройте страницу с блоком, который вы хотите идентифицировать, нажмите Инструмент идентификации в своих расширениях Chrome, и он сразу же покажет идентификационные номера блоков (которые будут примерно такими как # block-53c818fd6d3f39517aed или # block-yui_3_17_2_1_1556302617094_72323) 9017

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

Если вы не используете Google Chrome:

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

В противном случае вы можете щелкнуть блок правой кнопкой мыши и затем нажать «Проверить». Где-то в коде этого определенного объекта будет сказано, что ID = блок и т. Д. Хотя существует много «идентификаторов», поэтому убедитесь, что вы ищете правильный, он должен начинаться с блока .

СОВЕТ: Убедитесь, что номер блока начинается с блока.Если он начинается с чего-то еще, это неправильный идентификатор.


Шаг 2: Добавьте свой CSS

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

СОВЕТ: Я рекомендую открыть страницу, над которой вы планируете работать (с указанным блоком), пока вы работаете над CSS, потому что, когда вы вносите изменения CSS, вы сможете увидеть, как они происходят. страница.

Вставьте свой идентификатор блока в редактор CSS и убедитесь, что он имеет решётку (#) в начале.

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

# block-53c818fd6d3f39517aed {
background: # f0f0f0;
отступ: 50 пикселей;
выравнивание текста: по центру;
}


Просто замените Block Id (на тот, который вы скопировали / нашли ранее), цветовой шестнадцатеричный код , значение заполнения и значение выравнивания текста .

Оставить комментарий

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.