Как обрезать фон в css
Перейти к содержимому

Как обрезать фон в css

  • автор:

background-clip

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

Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за border-style (en-US) или border-image (en-US)); в противном случае граница скрывает разницу.

Синтаксис

/* Ключевые слова */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* Глобальные значения */ background-clip: inherit; background-clip: initial; background-clip: unset; 

Значения

Фон распространяется до внешнего края границы (но под границей в z-порядке).

Фон распространяется до внешнего края отступа. Под границей фон не рисуется.

Фон закрашивается внутри (обрезается) поля содержимого.

Фон закрашивается внутри (обрезается) текста переднего плана.

Формальный синтаксис

background-clip =
# (en-US)

=
content-box | (en-US)
padding-box | (en-US)
border-box

Примеры

HTML

p class="border-box">The background extends behind the border.p> p class="padding-box"> The background extends to the inside edge of the border. p> p class="content-box"> The background extends only to the edge of the content box. p> p class="text">The background is clipped to the foreground text.p> 

CSS

p  border: 0.8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; > .border-box  background-clip: border-box; > .padding-box  background-clip: padding-box; > .content-box  background-clip: content-box; > .text  background-clip: text; color: rgba(0, 0, 0, 0.2); > 
Результат

Спецификации

Specification
CSS Backgrounds and Borders Module Level 3
# background-clip
Начальное значение border-box
Применяется к все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется нет
Обработка значения как указано
Animation type повторяющийся список из

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Свойство clip-path создаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.
  • Свойства фона: background , background-color , background-image
  • Введение в блочную модель CSS

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

background — repeat

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

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 17 мая 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

 div class="element">div>      
 .element  height: 100vh; background-image: url(images/pattern.png); background-size: 64px auto;> .element  height: 100vh; background-image: url(images/pattern.png); background-size: 64px auto; >      

Получился красивый паттерн. Изображение повторяется по горизонтали и по вертикали.

Изменим значение на repeat — x :

 .element  background-repeat: repeat-x;> .element  background-repeat: repeat-x; >      

Теперь картинка повторяется только по горизонтали. Аналогично можно повторить картинку по вертикали при помощи значения repeat — y .

Но чаще всего в работе встречается значение no — repeat . С таким значением фоновая картинка не будет повторяться ни по горизонтали, ни по вертикали.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В качестве значения для свойства background — repeat используются следующие ключевые слова:

  • no — repeat — фоновое изображение не повторяется, остаётся только одно внутри элемента.
  • repeat — изображение повторяется и по горизонтали, и по вертикали до тех пор, пока не заполнит всю площадь элемента (значение по умолчанию).
  • repeat — x — фон повторяется по горизонтали.
  • repeat — y — фон повторяется по вертикали.
  • space — изображение повторяется до тех пор, пока не заполнит весь элемент. При этом, если по размерам не удаётся повторить изображение без обрезки, то между картинками добавляется равное пространство. Крайне редко требуется в работе.
  • round — изображение повторяется так, чтобы заполнить весь элемент. Но картинка не обрезается, повторяется целое количество раз. Если это не удаётся, то картинка масштабируется. Крайне редко требуется в работе.

Ключевые слова repeat и no — repeat можно комбинировать, чтобы управлять повторениями по горизонтали (первое значение) и по вертикали (второе значение). Но проще указывать специальные ключевые слова repeat — x и repeat — y .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство не наследуется.

�� Значение по умолчанию — repeat .

�� Чаще всего для полноэкранных фонов указывается значение no — repeat .

�� Свойство background — repeat нельзя анимировать ��

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

background — repeat — свойство простое. Написано повторять — повторяем фон. Написано не повторять — не повторяем.

�� С помощью повторения фона и линейного градиента ( linear — gradient ) можно создавать полосатые фоны.

 div class="element">div>      
 .element  height: 100vh; background-image: linear-gradient( #49a16c 50px, #064236 0 ); background-size: 100% 100px; background-repeat: repeat-y;> .element  height: 100vh; background-image: linear-gradient( #49a16c 50px, #064236 0 ); background-size: 100% 100px; background-repeat: repeat-y; >      

«Обрезать» фон, прошу помощи

Author24 — интернет-сервис помощи студентам

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

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Обрезать фон средствами CSS
можно ли средствами css обрезать фон? или проще использовать картинку для background?

Как обрезать фон по высоте автоматически с учетом контента
Есть фоновое изображение с разрешением 1920х1959 я прописал его на фон контента, но оно.

Уважаемые сайтостроители, прошу вас о помощи!
Я делаю сайт просмотра онлайн фильмов и делаю полностью с нуля. подскажите сначала мне плиз вот.

2773 / 341 / 22
Регистрация: 15.01.2008
Сообщений: 2,614
эм. примерчики можно? сложно очень так со слов.
288 / 131 / 4
Регистрация: 15.02.2009
Сообщений: 520

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

Так в чём контент, там и задавай нужный фон, и всё. Других вариантов нет.

Vanstorm прав, надо знать как оно там сделано, тогда и поконкретней можно будет.

Регистрация: 28.02.2009
Сообщений: 31

Просто в контенте задать фон (так как WordPress) — выглядит так что только текст в фоне , а sidebar, header, footer нет.
Пробовал для body width выставить, фгн получается. Также пытался решить проблему задать в качестве background image с белыми краями(на пути встал вопрос с различным разрешением экрана на машинах)
В CSS —
body
Что ещё нужно в качестве примеров, сразу выложу.

288 / 131 / 4
Регистрация: 15.02.2009
Сообщений: 520

Ты чем контент загоняешь в центр?, таблицой, дивом или чем. Вот этому ЭЛЕМЕНТУ и прописывай другой фон, на выбор через class, style, id.

Регистрация: 28.02.2009
Сообщений: 31
Контент равняется по sidebar(sidebar слева), через CSS —
#content
#content .indent

если только контенту присвоить фон, получается что только его содержимое будет в фоне.
Я бы хотел чтобы просто по бокам странички не было фона(на опр. отступе), естественно все компоненты header, sidebar и т.п. будут в фоне. -))

288 / 131 / 4
Регистрация: 15.02.2009
Сообщений: 520

Ты бы банку кофе выставил, чтобы было на чём гадать.

Попробуй на этой основе.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
html>head> title>Пятно в центре/title> meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> meta name="generator" content="CSE HTML Validator Халявной Версии"> link rel="stylesheet" type="text/css" href="*.css"> style type="text/css"> #centr -->/style> /head> body> br>br> div align="center">div style="width:41%; background-color:red; text-align:center; margin:7px; padding:7px;">Фон отличается?/div> div id="centr">Да вроде разный./div> table border="0" width="41%" cellpadding="7" cellspacing="0" bgcolor="navy">tr>td> color="white">Так вроде, или разный?/font>/td>/tr>/table> /div> /body> /html>

Регистрация: 28.02.2009
Сообщений: 31

BlackApricot спасибо большое за терпение.
В итоге на основе твоих советов, создал класс в CSS, где прописал цвет и ширину, а у body-убрал background color. Получилось норм.

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как обрезать строку при помощи рег экспов
Здравствуйте. Хочу вырезать из строки имя домена. "http://subdomen.domen.ru/aaa" Как при.

Прошу помощи
Прошу помощи! Что делать, что б БЕСПЛАТНО увеличить число реальных посетителей. Кому интересно.

прошу помощи
Помогите получить зачетку. Надо написать токую програму на С : User вводит цифру нп: 7965132 а на.

Прошу помощи
Есть у меня отладочная плата на которой я экспериментирую. И вот возникла идея, сделать нечто.

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

Прошу помощи
Вот задали чтобы получить зачет сделать БД на любую свободную тему. Вот я начал делать БД сначала.

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

Как обрезать фон в css

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

Не обязательно указывать все перечисленные свойства, так как любое пропущенное свойство примет значение по умолчанию. При включении свойства background-size в сокращенную нотацию, его значения следует разделять прямой косой чертой (/), чтобы отличить его от свойства background-position.

Синтаксис

background: #ffffff; background: url('catfront.png') repeat-x; background: no-repeat center/75% url('/src/assets/product-bg.webp'); background: inherit;

Cвойство background-image

Устанавливает фоновое изображение элемента.

Синтаксис

background-image: none; background-image: url(http://pattern.dev/logo.png); background-image: url(sweettexture.jpg); background-image: linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)), url('catfront.png'); background-image: repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); background-image: initial; background-image: inherit;

Значения

  • изображение: Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none.
  • initial: Устанавливает значение свойства в значение по умолчанию.

Cвойство background-color

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

Синтаксис

background-color: #234f81; background-color: hsla(345, 100%, 50%, 0.81); background-color: currentColor; background-color: oklch(81.3% 0.321 149); background-color: initial; background-color: inherit;

Значения

  • цвет: Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent.
  • initial: Устанавливает значение свойства в значение по умолчанию.
  • inherit: Наследует значение свойства от родительского элемента.

Cвойство background-repeat

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

Синтаксис

background-repeat: repeat-y; background-repeat: repeat; background-repeat: repeat-x; ​​​​​​​background-repeat: space; ​​​​​​​background-repeat: round; ​​​​​​​background-repeat: no-repeat; background-repeat: repeat repeat; background-repeat: repeat space; background-repeat: no-repeat round; background-repeat: round space; background-repeat: initial; background-repeat: inherit;

Значения

  • repeat-x: Изображение повторяется по горизонтали. Разрешается как repeat, если присутствует no-repeat.
  • repeat-y: Изображение повторяется по вертикали. Разрешается как no-repeat repeat.
  • repeat: Изображение повторяется в обоих направлениях столько раз, сколько необходимо для покрытия фоновой области. Если изображение слишком большое, оно обрезается. Это значение по умолчанию.
  • space: Изображение повторяется столько раз, сколько возможно без обрезки, с равным расстоянием между изображениями. Первое и последнее изображения касаются краев области. Если область фона больше, чем область позиционирования фона, рисунок повторяется, чтобы заполнить область фона. Если места для двух копий изображения недостаточно, размещается только одно изображение, и его положение определяется свойством background-position. Оно разрешается в space space.
  • round: Изображение повторяется столько раз, сколько необходимо для заполнения фоновой области, при необходимости масштабируется без обрезки. Разрешается как round round.
  • no-repeat: Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repeat.
  • initial: Устанавливает значение свойства в значение по умолчанию.
  • inherit: Наследует значение свойства от родительского элемента.

Cвойство background-attachment

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

Синтаксис

background-attachment: fixed; background-attachment: scroll; background-attachment: local; background-attachment: initial; background-attachment: inherit;

Значения

  • fixed: Предотвращает перемещение, фиксирует фоновое изображение на заднем план
  • scroll: Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию.
  • local: Фоновое изображение прокручивается вместе с содержимым элемента.
  • initial: Устанавливает значение свойства в значение по умолчанию.

Cвойство background-position

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

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

Синтаксис

background-position: bottom; background-position: left; background-position: center; background-position: top; background-position: bottom; background-position: 4% 16%; background-position: 1vmin 2vw; background-position: 8ex 10%; background-position: 2.5em 6em, right; background-position: center 11% left; background-position: top right 10px; background-position: initial; background-position: inherit;

Значения

  • %: Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона — высота фонового изображения, где размер изображения — это размер, заданный свойством background-size. Значение по умолчанию 0% 0%.
  • длина: Значение длины дает фиксированную длину в качестве смещения.
  • top: Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края.
  • bottom: Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края.
  • center: Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано.
  • right: Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края.
  • left: Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края.
  • initial: Устанавливает значение свойства в значение по умолчанию.
  • inherit: Наследует значение свойства от родительского элемента.

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

Пара ключевых слов может быть переупорядочена, а комбинация ключевого слова и длины или процента — нет. Например, center left — допустимое значение, а 50% left — нет.

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

Cвойство background-clip

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

Синтаксис

background-clip: border-box; background-clip: content-box; background-clip: padding-box; background-clip: initial; background-clip: inherit;

Значения

  • border-box: Фон закрашивает область в пределах рамки элемента. Значение по умолчанию.
  • content-box: Фон закрашивает только область содержимого.
  • padding-box: Фон закрашивает область в пределах внутренних полей элемента.
  • initial: Устанавливает значение свойства в значение по умолчанию.
  • inherit: Наследует значение свойства от родительского элемента.

Cвойство background-origin

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

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

Синтаксис

background-origin: border-box; background-origin: padding-box; background-origin: content-box; background-origin: initial; background-origin: inherit;

Значения

  • border-box: Фон позиционируется относительно верхних границ рамки элемента.
  • padding-box: Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию.
  • content-box: Фон позиционируется относительно верхних границ области содержимого элемента.
  • initial: Устанавливает значение свойства в значение по умолчанию.
  • inherit: Наследует значение свойства от родительского элемента.

Если для элемента установлено background-attachment: fixed, свойство не будет иметь эффекта.

Если для элемента заданы background-clip: padding-box, background-origin: border-box, background-position: top left, и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.

Cвойство background-size

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

Синтаксис

background-size: contain; background-size: cover; background-size: 39%; background-size: 0.6rem; background-size: 12px; background-size: auto; background-size: 3em 25%; background-size: auto, auto; background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; background-size: initial; background-size: inherit;

Значения

  • auto(значение по умолчанию): Высота и ширина изображения равны его оригинальным размерам.
  • фиксированная длина: Размер задается парой значений, где первое значение задает ширину изображения, а второе — высоту. Чтобы фон масштабировался вместе с текстом, размер изображения должен быть задан в единицах em.
  • %: Масштабирует изображение пропорционально, чтобы заполнить ширину или высоту блока, в зависимости от того, что меньше.
  • cover: Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
  • contain: Масштабирует изображение пропорционально, чтобы оно поместилось внутри блока.
  • initial: Устанавливает значение свойства в значение по умолчанию.
  • inherit: Наследует значение свойства от родительского элемента.

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

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