Repeat css background image: background-repeat | htmlbook.ru

Содержание

background-repeat — CSS | MDN

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте  https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round) или равномерно растянуть от конца к концу (используя space).

 

/*Ключевые значения*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
​​​​​​​background-repeat: space;
​​​​​​​background-repeat: round;
​​​​​​​background-repeat: no-repeat;

/*Два значения: горизонтальное | вертикальное*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Глобальные значения */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

Значения

<repeat-style>
Следующие однозначные имеют двухзначные эквиваленты:
repeat-xтоже самое, что и repeat no-repeat
repeat-yтоже самое, что и no-repeat repeat
repeatтоже самое, что и repeat repeat
spaceтоже самое, что и space space
roundтоже самое, что и round round
no-repeatтоже самое, что и no-repeat no-repeat

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

repeatИзображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
spaceИзображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства background-position игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space.
roundИзображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
no-repeatИзображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством background-position.

HTML

<ol>
    <li>no-repeat
        <div>&nbsp;</div>
    </li>
    <li>repeat
        <div>&nbsp;</div>
    </li>
    <li>repeat-x
        <div>&nbsp;</div>
    </li>
    <li>repeat-y
        <div>&nbsp;</div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
        <div>&nbsp;</div>
    </li>
</ol>

CSS


li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn. mozillademos.org/files/12005/starsolid.gif);
    width: 144px;
    height: 84px;
}


.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}


.five {
    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.mozilla.org/static/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

Результат

В этом примере каждому элементу списка соответствует другое значение background-repeat.

BCD tables only load in the browser

background — CSS | MDN

Сокращённое CSS свойство background  устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.

Исходный код этого интерактивного примера хранится в репозитории GitHub.  Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github. com/mdn/interactive-examples и отправьте нам запрос на извлечение..

Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment.

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

[ (en-US) <bg-layer> , ] (en-US)* (en-US) <final-bg-layer>
где 
<bg-layer> = <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>
<final-bg-layer> = <'background-color'> || (en-US) <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>
где 
<bg-image> = none | (en-US) <image> (en-US)
<bg-position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US) ] (en-US)
<bg-size> = [ (en-US) <length-percentage> | (en-US) auto ] (en-US){ (en-US)1,2} (en-US) | (en-US) cover | (en-US) contain
<repeat-style> = repeat-x | (en-US) repeat-y | (en-US) [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){ (en-US)1,2} (en-US)
<attachment> = scroll | (en-US) fixed | (en-US) local
<box> = border-box | (en-US) padding-box | (en-US) content-box
где 
<image> = <url> | (en-US) <image()> | (en-US) <image-set()> | (en-US) <element()> | (en-US) <paint()> | (en-US) <cross-fade()> | (en-US) <gradient>
<length-percentage> = <length> | (en-US) <percentage>
где 
<image()> = image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ] (en-US)! (en-US) )
<image-set()> = image-set( <image-set-option># (en-US) )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? (en-US) )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? (en-US) )
<gradient> = <linear-gradient()> | (en-US) <repeating-linear-gradient()> | (en-US) <radial-gradient()> | (en-US) <repeating-radial-gradient()> | (en-US) <conic-gradient()>
где 
<image-tags> = ltr | (en-US) rtl
<image-src> = <url> | (en-US) <string> (en-US)
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
<image-set-option> = [ (en-US) <image> (en-US) | (en-US) <string> (en-US) ] (en-US) [ (en-US) <resolution> (en-US) || (en-US) type(<string> (en-US)) ] (en-US)
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? (en-US) && (en-US) <image> (en-US)
<cf-final-image> = <image> (en-US) | (en-US) <color>
<linear-gradient()> = linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ (en-US) from <angle> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US), <angular-color-stop-list> )
где 
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<side-or-corner> = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> = [ (en-US) <linear-color-stop> [ (en-US), <linear-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <linear-color-stop>
<ending-shape> = circle | (en-US) ellipse
<size> = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) <length> | (en-US) <length-percentage>{ (en-US)2} (en-US)
<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)
<angular-color-stop-list> = [ (en-US) <angular-color-stop> [ (en-US), <angular-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <angular-color-stop>
где 
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
<linear-color-stop> = <color> <color-stop-length>? (en-US)
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && (en-US) <color-stop-angle>? (en-US)
<angular-color-hint> = <angle-percentage>
где 
<color-stop-length> = <length-percentage>{ (en-US)1,2} (en-US)
<color-stop-angle> = <angle-percentage>{ (en-US)1,2} (en-US)
<angle-percentage> = <angle> | (en-US) <percentage>

повтор фона — учебник CSS

Если элементу задать свойство background-image, то фоновый рисунок будет по умолчанию повторяться в двух осях — по горизонтали (x) и по вертикали (y). Для примера возьмем небольшое изображение с бесшовным фоном:

И установим его в качестве фона для блока div:

Изображение дублируется по вертикали и горизонтали

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

Свойство background-repeat

Свойство background-repeat предназначено для управления повтором фона, заданного через background-image. Принимает оно следующие значения:

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

  • no-repeat — заполняет элемент фоновым рисунком один раз. Размер фона остается натуральным (не сужается и не растягивается). Свойство с данным значением очень часто применяется на практике (мы рассмотрим это далее в книге).

    background-repeat: no-repeat

  • repeat-x — фон повторяется только по горизонтали (оси x), до полного заполнения элемента по ширине. Удобно использовать для оформления элементов интерфейса (графическая полоска вдоль шапки сайта и т. п.).

    background-repeat: repeat-x

  • repeat-y — фон повторяется только по вертикали (оси y), до полного заполнения элемента по высоте. Удобно использовать для оформления элементов интерфейса (графическая полоска по высоте сайдбара и т. п.).

    background-repeat: repeat-y

Эти значения поддерживаются всеми браузерами, включая IE6. Существует еще два значения, которые работают только в современных версиях браузеров (IE10+, Edge 12+, Firefox 49+, Chrome 32+, Safari 7+, Opera 19+):

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

    background-repeat: round

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

    background-repeat: space

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

Подробно о свойстве CSS Background

 

Каждый элемент в DOM-дереве напоминает прямоугольник, который имеет фоновый слой, он может быть либо полностью прозрачным, либо цветным, либо содержать изображение. Этот фоновый слой находится под контролем 8 свойств CSS (плюс 1-го сокращённого свойства).

background-color

Свойство background-color задает цвет фона для элемента. Это значение может быть любым принятым значением цвета, или ключевым словом transparent.

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

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

background-image

Свойство background-image определяет фоновое изображение (или изображения) для элемента. Это значение обычно представляет собой URL к изображению, определенному в url() нотации. Также может быть использовано значение none, которое будет учитываться в качестве слоя, но пустого.

.left { background-image: url(‘ire.png’); }
.right { background-image: none; }

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

.middle {
  background-image: url(‘khaled.png’), url(‘ire.png’);

  /* Other styles */
  background-repeat: no-repeat;
  background-size: 100px;
}

background-repeat

Свойство background-repeat управляет тем как фоновое изображение заполняет пространство, после того как установлен его размер (при помощи свойства background-size (см. ниже)) и расположение (при помощи свойства background-position (см. ниже)).

Значение этого свойства может быть одним из следующих: repeat-x, repeat-y, repeat, space, round, no-repeat. Кроме первых двух (repeat-x и repeat-y), другие значения могут быть определены или один раз, для оси х и оси у, или для каждой оси по отдельности.

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
. top-outer-right { background-repeat: space; }

.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size

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

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

.left {
  background-size: contain;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
}
.right { background-size: cover; /*Остальные стили такие же как для класса as . left */ }

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

.left { background-size: 50px; /*Остальные стили такие же как для класса .left */ }
.right { background-size: 50% 80%; /*Остальные стили такие же как для класса .left */ }

background-attachment

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

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

.left {
  background-attachment: fixed;
  background-size: 50%;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
  overflow: scroll;
}
.middle { background-attachment: local; /* Остальные стили такие же как для класса .left */ }
.right { background-attachment: scroll; /*Остальные стили такие же как для класса .left */ }

background-position

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

Доступны следующие ключевые слова top, right, bottom, left, и center. Мы можем использовать эти ключевые слова в любой комбинации, и если указано только одно ключевое слово, то предполагается что другое равно center.

.top-left {
  background-position: top;
  background-size: 50%;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
}
.top-middle { background-position: right;  /*Остальные стили такие же как для класса .top-left */ }
.top-right { background-position: bottom;  /*Остальные стили такие же как для класса .top-left */ }
.bottom-left { background-position: left;  /*Остальные стили такие же как для класса .top-left */ }
.bottom-right { background-position: center;  /*Остальные стили такие же как для класса .top-left */ }

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

.left { background-position: 20px 70px; /*Остальные стили такие же как для класса .top-left */ }
.right { background-position: 50%; /*Остальные стили такие же как для класса .top-left */ }

background-origin

Свойство background-origin определяет область позиционирования фонового изображения.

Доступные значения следующие: border-box — фон позиционируется относительно границы, при этом линия границы может перекрывать изображение, padding-box  — фон позиционируется относительно края элемента с учетом толщины границы, и content-box — фон позиционируется относительно содержимого элемента.

.left {
  background-origin: border-box;
  background-size: 50%;
  background-image: url(‘ire.png’);
  background-repeat: no-repeat;
  background-position: top left;
  border: 10px dotted black;
  padding: 20px;
}
.middle { background-origin: padding-box;  /*Остальные стили такие же как для класса .left*/ }
.right { background-origin: content-box;  /*Остальные стили такие же как для класса .left*/ }

background-clip

Свойство background-clip определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

. left{
  background-clip: border-box;
  background-size: 50%;
  background-color: #ffdb3a;
 background-repeat: no-repeat;
  background-position: top left;
  border: 10px dotted black;
  padding: 20px;
}
.middle { background-clip: padding-box;  /*Остальные стили такие же как для класса .left*/ }
.right { background-clip: content-box;  /*Остальные стили такие же как для класса .left*/ }

background

И, наконец, свойство background является обобщающим для других свойств фона. Порядок подсвойств не имеет значения, так как типы данных для каждого свойства различны. Тем не менее, для background-origin и background-clip, если указано только одно значение, оно используется для обоих свойств. Если два, первое устанавливается для свойства background-origin.

Перевод статьи с https://bitsofco.de/

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

background-repeat — CSS: каскадные таблицы стилей

Свойство CSS background-repeat устанавливает способ повторения фоновых изображений. Фоновое изображение может повторяться по горизонтальной и вертикальной осям или вообще не повторяться.

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

 
фон-повтор: повтор-х;
фон-повтор: повтор-у;
фон-повтор: повторение;
фон-повтор: пробел;
фон-повтор: круглый;
фон-повтор: без повторения;


background-repeat: повторить пробел;
фон-повтор: повторение повторения;
фон-повтор: круглое пространство;
фон-повтор: без повторения раунда;


фон-повтор: наследовать;
фон-повтор: начальный;
фон-повтор: отключено;

Значения

<стиль повторения>
Однозначный синтаксис является сокращением полного двухзначного синтаксиса:
Одно значение Двухзначный эквивалент
повтор-x повторение без повторения
повторение без повтора
повтор повторение
место место
круглый круглый круглый
без повтора без повтора Без повтора

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

повтор Изображение повторяется столько, сколько необходимо, чтобы покрыть всю область рисования фонового изображения. Последнее изображение будет обрезано, если оно не подходит.
место Изображение максимально повторяется без обрезки. Первое и последнее изображения прикрепляются к любой стороне элемента, а пробелы распределяются между изображениями равномерно.Свойство background-position игнорируется, если только одно изображение не может быть отображено без обрезки. Единственный случай, когда отсечение происходит с использованием пространства , — это когда недостаточно места для отображения одного изображения.
круглый По мере увеличения разрешенного пространства повторяющиеся изображения будут растягиваться (не оставляя промежутков) до тех пор, пока не останется место (оставшееся пространство> = половине ширины изображения) для добавления еще одного изображения. Когда добавляется следующее изображение, все текущие сжимаются, чтобы освободить место.Пример: изображение с исходной шириной 260 пикселей, повторенное три раза, может растягиваться до тех пор, пока каждое повторение не станет шириной 300 пикселей, а затем будет добавлено другое изображение. Затем они сжимаются до 225 пикселей.
без повтора Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью закрыта). Положение неповторяющегося фонового изображения определяется свойством CSS background-position .

Настройка повторения фона

HTML 
  
    
  
  1.  без повтора
    
     
    
  
    2. 
  
  2.  повторить
    
     
    
  
    3. 
  
  3.  repeat-x
    
     
    
  
    4. 
  
  4.  repeat-y
    
     
    
  
    5. 
  
  5.  пробел
    
     
    
  
    6. 
  
  6.  раунд
    
     
    
  
    7. 
  
  7.  repeat-x, repeat-y (несколько изображений)
    
     
    
  
    8.
CSS 
 
ол,
li {
  маржа: 0;
  отступ: 0;
}
li {
  нижнее поле: 12 пикселей;
}
div {
    background-image: url (starsolid. gif);
    ширина: 160 пикселей;
    высота: 70 пикселей;
}


.один {
  фон-повтор: без повторения;
}
.два {
  фон-повтор: повторение;
}
.три {
  фон-повтор: повтор-х;
}
.four {
  фон-повтор: повтор-у;
}
.пять {
  фон-повтор: пробел;
}
.шесть {
  фон-повтор: круглый;
}


.Семь {
  фоновое изображение: url (starsolid.gif),
                     URL (https://developer.mozilla.org/static/img/favicon32.png);
  фон-повтор: повтор-х,
                     повторять-у;
  высота: 144 пикселя;
}
Результат

В этом примере каждому элементу списка соответствует другое значение background-repeat .

таблицы BCD загружаются только в браузере

Повторение фона — Tailwind CSS

Повторение

Используйте bg-repeat для повторения фонового изображения как по вертикали, так и по горизонтали.

Без повтора

Используйте bg-no-repeat , если не хотите повторять фоновое изображение.

Повторить по горизонтали

Используйте bg-repeat-x , чтобы повторить фоновое изображение только по горизонтали.

Повторить по вертикали

Используйте bg-repeat-y , чтобы повторить фоновое изображение только по вертикали.

Адаптивный

Чтобы контролировать повторение фонового изображения элемента в определенной точке останова, добавьте префикс {screen}: к любой существующей утилите повторения фона. Например, добавление класса md: bg-repeat-x к элементу приведет к применению утилиты bg-repeat-x при средних размерах экрана и выше.

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

Настройка

Варианты

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

Вы можете контролировать, какие варианты генерируются для утилит фонового повтора, изменив свойство backgroundRepeat в разделе вариантов вашего попутного ветра .config.js файл.

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

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ backgroundRepeat: ['hover', 'focus'],
      }
    }
  }

Если вы не планируете использовать утилиты фонового повтора в своем проекте, вы можете полностью отключить их, установив для свойства backgroundRepeat значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.export = {
    corePlugins: {
      
+ backgroundRepeat: false,
    }
  }

CSS Свойство: background-repeat | HTML Dog

Свойство CSS: background-repeat | HTML Собака

Вы здесь: Главная → Ссылки → CSS → Свойства →

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

background-position: top right в сочетании с background-repeat: no-repeat .

Повторение фона также можно указать как часть сокращенного свойства background .

Возможные значения

Значение Описание Пример
повтор Мозаичный. Повторение изображения как по горизонтали, так и по вертикали. Поведение по умолчанию.
repeat-x Повторение изображения только по горизонтали.
repeat-y Повтор изображения только по вертикали.
без повтора Изображение вообще не повторяется, отображается только один экземпляр.
пробел Изображения повторяются, но не обрезаются. Равномерный зазор между каждым экземпляром, пока не сможет поместиться новый.
круглый Изображения повторяются, но не обрезаются. Каждый экземпляр растягивается, чтобы заполнить область фона, пока не сможет поместиться новый экземпляр.
[значение] , [значение] Для нескольких фонов. Значения, разделенные запятыми, соответствуют нескольким изображениям, разделенным запятыми, с background-image . repeat-x, repeat-y
наследование
начальное
снятое

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

Пример 

 
заголовок {фон-повтор: повтор-х; }
/ * Фоновое изображение заголовка повторяется по горизонтали, но не по вертикали.* /

Поддержка браузера

Поддерживается всеми современными браузерами.

Связанные страницы

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

Учебники

Примеры

Главное меню

Дополнительное меню

↑ Вверх

Оптимизация фоновых изображений CSS с помощью медиа-запросов

• Обновлено

Появляется в: Быстрое время загрузки

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

Предварительные требования #

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

Ознакомьтесь с адаптивными фоновыми изображениями #

Сначала проанализируйте сетевой трафик неоптимизированной демонстрации:

  1. Откройте неоптимизированную демонстрацию на новой вкладке Chrome.
  2. Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
  3. Щелкните вкладку Сеть .
  4. Обновите страницу.

Вы увидите, что единственное запрашиваемое изображение — это background-desktop.jpg размером 1006 КБ :

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

Вы можете увидеть стили, управляющие фоновым изображением, в style.css:

  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повтора; размер фона: обложка; 
 background-image: url (images / background-desktop.jpg); 
}

Вот значение каждого из используемых свойств:

  • background-position: center center : Центрировать изображение по вертикали и горизонтали.
  • background-repeat: no-repeat : показать изображение только один раз.
  • background-attachment: fixed : Избегайте прокрутки фонового изображения.
  • размер фона: крышка : изменение размера изображения для покрытия всего контейнера.
  • background-image: url (images / background-desktop.jpg) : URL-адрес изображения.

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

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

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

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

Использование медиазапросов — распространенный метод объявления таблиц стилей, которые будут применяться только к определенным типам носителей или устройств. Они реализуются с помощью правил @media, которые позволяют вам определять набор точек останова, в которых определены определенные стили. Когда выполняются условия, определенные правилом @media (например, определенная ширина экрана), будет применена группа стилей, определенных внутри точки останова.

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

  • В стиле .css удалить строку, содержащую фоновое изображение URL:
  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повтора; размер фона: обложка; 
  background-image: url (images / background-desktop.jpg);  
}
  • Затем создайте точку останова для каждой ширины экрана на основе общих размеров в пикселях, которые обычно имеют экраны мобильных устройств, планшетов и настольных компьютеров:

Для мобильных устройств:

  @media (max-width : 480px) {
 body {
 background-image: url (images / background-mobile. jpg); 
} 
}

Для планшетов:

  @media (min-width: 481px) и (max-width: 1024px) {
 body {
 background-image: url (images / background-tablet.jpg); 
} 
}

Для настольных устройств:

  @media (min-width: 1025px) {
 body {
 background-image: url (images / background-desktop.jpg); 
} 
}

Откройте оптимизированную версию style.css в своем браузере, чтобы увидеть внесенные изменения.

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

Измерение для разных устройств #

Затем визуализируйте получившийся сайт на экранах разных размеров и на смоделированных мобильных устройствах:

  1. Откройте оптимизированный сайт на новой вкладке Chrome.
  2. Сделайте область просмотра узкой (менее 480 пикселей ).
  3. Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
  4. Щелкните вкладку Сеть .
  5. Обновите страницу. Обратите внимание, как запрашивалось изображение background-mobile.jpg .
  6. Расширьте область просмотра. Как только он станет шире 480px , обратите внимание, что запрашивается background-tablet.jpg . Как только он станет шире 1025px , обратите внимание, что запрашивается background-desktop.jpg .

При изменении ширины экрана браузера запрашиваются новые изображения.

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

Размер нового мобильного фона на на 67% меньше, чем у настольного компьютера.

Сводка №

В этом руководстве вы научились применять медиа-запросы для запроса фоновых изображений, адаптированных к конкретным размерам экрана, и экономии байтов при доступе к сайту на небольших устройствах, например мобильных телефонах. Вы использовали правило @media для реализации адаптивного фона. Этот метод широко поддерживается всеми браузерами. Новая функция CSS: image-set (), может использоваться для той же цели с меньшим количеством строк кода. На момент написания этой статьи эта функция поддерживается не во всех браузерах, но вы, возможно, захотите следить за тем, как развивается принятие, поскольку она может представлять интересную альтернативу этому методу.

Последнее обновление: Улучшение статьи

Учебное пособие по фоновому изображению CSS с примерами

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

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

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

И, если вы, как обычно, не любите читать, перейдите на наш канал Youtube, чтобы посмотреть видеоверсию.

Давайте посмотрим, что скрывается за фоном!

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

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

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

**** 2.Как использовать несколько фоновых изображений с помощью CSS?

Хм, а что, если я хочу добавить более одного изображения в качестве фона?

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

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

Посмотрим, как это работает!

3.Как создать треугольное фоновое изображение?

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

Это делается путем создания двух блоков div, оба для всего окна просмотра, затем необходимо добавить фоновое изображение к ним обоим, а затем второму div требуется свойство clip-path для создания треугольной формы.

Посмотрим код и результат!

**** 4. Как добавить градиент на фоновое изображение?

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

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

Давайте посмотрим, как легко добавить градиент на фоновое изображение!

**** 5. Как создать анимацию фонового изображения с изменением цвета?

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

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

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

6.Как сделать сетку фонового изображения?

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

О, если вы не знаете, что такое CSS-сетка, посмотрите здесь.

Давайте взглянем!

7. Как установить фоновое изображение в качестве цвета текста?

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

Давайте посмотрим, какой потрясающий эффект мы можем получить!

Заключение

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

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

Спасибо за чтение,

Анна из Дуомли

Сопутствующие показания 📖

Учебник по использованию анимированного CSS с примерами

Учебное пособие по созданию таблицы HTML

Граница CSS с примерами учебник

Анна Данилец

Анна Данилец окончила факультет управления бизнесом.В течение многих лет она получала солидный опыт в разработке клиентских и серверных интерфейсов, создавая программное обеспечение для известных ИТ-компаний.
Ее опыт в области ИТ — это React.JS, Angular, React Native, Flutter, Node.JS и Nest.JS.
В последние годы она вела бизнес для Duomly, уделяя особое внимание ИТ, а также интернет-маркетингу, дизайну и созданию контента, таким как ведение блогов и Youtube. В нерабочее время Анна ведет свой настоящий криминальный канал на YouTube, любит спорт, солнце и средиземноморскую кухню.

Подробнее об Анне Данилец

Если понравилось, делитесь и комментируйте!

Переворот изображений по горизонтали или вертикали с помощью CSS и JavaScript • PQINA

В этой трехминутной статье мы рассмотрим переворачивание изображений по горизонтали и вертикали с помощью CSS и JavaScript. Мы рассмотрим, как перевернуть элемент img , background-image или зеркально отразить ImageData с помощью элемента canvas .

Переворот элемента изображения

Мы можем перевернуть элемент img , используя свойство CSS transform . Мы можем сделать это с помощью преобразований scaleX и scaleY .

Наш образ:

CSS, чтобы перевернуть его.

  img {
  
  преобразовать: scaleX (-1);
}

img {
  
  преобразовать: scaleY (-1);
}

img {
  
  преобразование: масштаб (-1, -1);
}

оригинал

scaleX (-1)

scaleY (-1)

масштаб (-1, -1)

В качестве альтернативы вы можете использовать rotateX и rotateY 

  img {
  
  преобразовать: rotateY (180deg);
}

img {
  
  преобразовать: rotateX (180deg);
}

img {
  
  преобразовать: rotateX (180deg) rotateY (180deg);
}

оригинал

rotateY (180 градусов)

rotateX (180 градусов)

rotateX (180 градусов)
rotateY (180 градусов)

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

scaleX

rotateY

Обратите внимание, что я добавил небольшую перспективу в цепочку преобразований. Без перспективного преобразования анимация rotateY была бы такой же плоской, как анимация scaleX . Я также добавил его в анимацию scaleX, чтобы показать, что это не имеет значения.

  @keyframes flip-with-scale {
  0% {
    преобразовать: перспектива (400 пикселей) scaleX (1);
  }

  100% {
    преобразовать: перспектива (400 пикселей) scaleX (-1);
  }
}

@keyframes flip-with-rotate {
  0% {
    преобразовать: перспектива (400 пикселей) rotateY (0);
  }

  100% {
    преобразовать: перспектива (400 пикселей) rotateY (180 градусов);
  }
}

Хотите, чтобы вас всегда знали?

Подпишитесь ниже, чтобы быть в курсе новых статей и выпусков продуктов PQINA, таких как FilePond и Doka Image Editor

Переворот фонового изображения

Единственный способ (на данный момент) (насколько я могу судить) перевернуть фоновое изображение — перевернуть элемент, содержащий фоновое изображение. Но это также перевернуло бы его содержимое.

  

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

  
  .tulips {
  фоновое изображение: URL (/media/tulips.jpg);
  фон-повтор: без повторения;
  размер фона: содержать;
  отступ слева: 5em;
}

.tulips-flipped {
  преобразовать: scaleX (-1);
}

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

оригинал

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

scaleX (-1)

Не очень хорошо

Чтобы обойти это, мы можем либо переместить фон в отдельный элемент, либо создать псевдоэлемент.

Пойдем с псевдоэлементом.

  .tulips {
  дисплей: гибкий;
  ширина: 15em;
}


.tulips-flipped :: before {
  содержание: "";
  background-image: url (/ media / tulips. jpg);
  фон-повтор: без повторения;
  размер фона: обложка;
  минимальная ширина: 5em;
}


.tulips-flipped :: before {
  преобразовать: scaleX (-1);
}

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

оригинал

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

scaleX (-1)

Переворот изображения с помощью JavaScript

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

Мы будем использовать данные изображения в элементе изображения под фрагментом кода, это просто тег img с именем класса, установленным на image-tulips .

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

  const inputImage = document.querySelector (". Изображение тюльпанов");


if (inputImage.complete) {
  flipImage ();
}

еще {
  inputImage.onload = flipImage;
}


function flipImage () {
  
  const outputImage = document.createElement ("холст");

  
  outputImage.width = inputImage.naturalWidth;
  outputImage.height = inputImage.naturalHeight;

  
  const ctx = outputImage.getContext ("2d");

  
  
  ctx.scale (-1, 1);

  
  
  ctx.drawImage (inputImage, -outputImage.width, 0);

  
  inputImage.parentNode.insertBefore (
    outputImage,
    inputImage.nextElementSibling
  );
}

Приведенный выше код только что запущен, и вы можете увидеть результат ниже. Первое изображение - это inputImage , а второе изображение - это элемент холста outputImage .

Заключение

Мы узнали три метода переворачивания изображений для различных целей. Мы можем переворачивать изображения с помощью свойства CSS transform . Преобразования scaleX и scaleY работают, но преобразования rotateX и rotateY позволяют улучшить анимацию (при необходимости).Мы быстро изучили переворачивание фоновых изображений с помощью псевдоэлементов и закончили статью манипулированием фактическими данными изображения с помощью JavaScript и элемента холста.

Я использую Twitter, чтобы делиться новыми советами и приемами веб-разработки, так что подпишитесь на меня, если вам это интересно и вы хотите узнать больше.

Десять примеров для установки изображения с помощью свойства фонового изображения CSS

Назначение свойства фонового изображения CSS

Свойство CSS background-image используется для установки фонового изображения элементов HTML, таких как div, абзацы, заголовки, заголовки таблиц, тело и т. Д.

Вы можете устанавливать изображения с различными расширениями, такими как png, jpg, gif, svg и т. Д.

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

Настройка фона одного изображения:

background-image: url («images / demo.jpg»);

Или используйте сокращенное свойство фона:

фон: url («images / demo.jpg ”);

Вы также можете использовать абсолютный путь:

фоновое изображение: & nbsp; URL («http://www.example.com/images/demo.jpg»);

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

background-image: url («images / image1. jpg»), url («images / image2.jpg »), url (« images / image3.jpg »);

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

Простой пример установки фонового изображения для div

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

. Смотрите код и демонстрацию в Интернете:

См. Онлайн-демонстрацию и код

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

.divbk {

background-image: url ("images / sunset.jpg");

высота: 400 пикселей;

ширина: 450 пикселей;

}

Пример установки резервного цвета

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

фон: url («images / sunset1. jpg ») #eee;

Посмотреть демонстрацию онлайн:

См. Онлайн-демонстрацию и код

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

.divbk {

фон: url ("images / sunset1.jpg") # A3B8C0;

высота: 400 пикселей;

ширина: 450 пикселей;

}

Демонстрация нескольких фоновых изображений

В этом примере я использовал два изображения в свойстве CSS3 background-image.Наряду с настройкой фоновых изображений используются следующие свойства background position и background-repeat:

См. Онлайн-демонстрацию и код

Вот как несколько изображений устанавливаются с другими свойствами CSS:

background-image: url ("images / car. jpg"), url ("images / motoway.jpg");

высота: 500 пикселей;

ширина: 400 пикселей;

background-position: center, left;

фоновый повтор: без повтора;

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

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

Отображение фонового изображения с прозрачностью или непрозрачностью

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

В CSS одним из способов может быть использование фона с linear-gradient и использование там RGB, что позволяет установить непрозрачность.

Следующий пример демонстрирует, как это можно сделать:

См. Онлайн-демонстрацию и код

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

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

14

18

19

.divbk {

высота: 450 пикселей;

ширина: 400 пикселей;

фон: -webkit-linear-gradient (сверху, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg");

фон: -o-linear-gradient (сверху, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg");

фон: -ms-linear-gradient (top, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway. jpg ");

фон: -moz-linear-gradient (top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url (" images / motoway.jpg ");

фон: -webkit-gradient (линейный, слева вверху, внизу слева, остановка цвета (0%, rgba (255,255,255,0,7)), остановка цвета (100%, rgba (255,255,255,0,7))), URL-адрес ("images / motoway.jpg");

фон: linear-gradient (вверх, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg) ");

}

Свойство CSS3 совместимо со всеми основными браузерами; однако вам придется обращаться с каждым отдельно.Например, в Mozilla Firefox вы должны использовать эту строку:

фон: -moz-linear-gradient (вверху, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg");

В этом примере я использовал ту же высоту и ширину для div, что и изображение. Если у вас есть меньшее изображение или больший div, используйте свойство repeat, как показано ниже:

фон: linear-gradient (to top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url («images / motoway.jpg» повторяется 0 0);

В случае вышеприведенного примера изображение не будет повторяться, а пустое пространство будет заполнено заданным цветом RGB.

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

Использование фонового изображения в таблицах HTML

Вы также можете установить фоновые изображения для элементов таблицы, используя свойство CSS background image.Заголовок таблицы и изображения данных таблицы могут быть установлены отдельно. Если вы установите фоновое изображение в основном теге

, то фоновое изображение может быть применено и ко всей таблице.

В следующей демонстрации я установлю только фоновое изображение заголовков таблиц:

См. Онлайн-демонстрацию и код

Следующий CSS используется для создания таблицы, особенно фокус на заголовке таблицы CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

14

18

19

20

21

22

23

24

25

26

27

28

29

30

000

34

35

36

37

.демотбл {

граница-обрушение: обрушение;

}

.demotbl th {

цвет: # EAE635;

размер шрифта: 20 пикселей;

фон: url ("images / CSS-background-image-table.jpg");

высота: 50 пикселей;

ширина: 150 пикселей;

радиус границы: 6 пикселей;

}

. demotbl td {

граница: 1 пиксель, пунктирная черная;

бордюр-верх: нет;

цвет: # 002F5E;

отступ: 15 пикселей;

ширина: 100 пикселей;

цвет фона: # D2E6FB;

}

Вы можете увидеть полный код на демонстрационной странице.

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

Настройка фонового изображения на всю страницу Пример CSS

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

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

См. Онлайн-демонстрацию и код

Установка полного фонового изображения для примера div

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

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

См. Онлайн-демонстрацию и код

CSS:

фон: исправлен центр url ("images / background.jpg") по центру;

фон-повтор: повторение;

высота: 300 пикселей;

ширина: 200 пикселей;

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

Установка размера фонового изображения

Используя свойство background-size с background-image, вы можете установить высоту и ширину фонового изображения.

Синтаксис использования свойства CSS background-size, например:

размер фона: 200 пикселей 300 пикселей;

Где первое значение представляет ширину, а второе указывает высоту изображения.

См. Пример ниже:

См. Онлайн-демонстрацию и код

Вы также можете указать высоту и ширину в процентах.Например:

background-image: url ("images / banana.jpg");

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

Вы должны использовать background-repeat: no-repeat; в этом случае, в противном случае оставшееся пространство контейнера (в этом случае div) будет заполнено этим изображением.

Применение преобразования к фоновым изображениям

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

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

Демонстрация поворота изображения на 20 градусов

См. Онлайн-демонстрацию и код

CSS:

фон: url ("images / bk.jpg");

преобразование: поворот (20 градусов);

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

Ниже приведен пример, в котором используется перекос со значениями x и y:

См. Онлайн-демонстрацию и код

Следующий CSS используется для перекоса изображения по свойству преобразования:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

14

18

19

20

21

22

23

24

25

26

27

28

29

30

000

34

35

36

37

. divbk {

фон: url ("images / bk.jpg");

-webkit-transform: skew (10deg, 10deg);

-moz-transform: skew (10deg, 10deg);

-ms-преобразование: наклон (10deg, 10deg);

-о-преобразование: наклон (10deg, 10deg);

преобразование: наклон (10deg, 10deg);

высота: 230 пикселей;

ширина: 215 пикселей;

поля: 42 пикселя;

}

.контейнер {

бордюр: сплошной черный 1 пиксель;

высота: 400 пикселей;

ширина: 300 пикселей;

цвет фона: # D5E6F4;

}

См. Полный код, щелкнув изображение или ссылку выше.

Последнее слово

Свойство CSS background-image следует использовать, если оно является частью дизайна, а не содержимым.Изображения маленькие и должны повторяться.

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

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