Css repeat y: background-repeat — CSS | MDN — Независимое театральное объединение "Зрительские симпатии"

Содержание

css — Repeat-y слева 50 пикселей также повторяет изображение сверху

спросил 8 лет, 1 месяц назад

Изменено 8 лет, 1 месяц назад

Просмотрено 67 раз

У меня есть следующее правило:

 background: url(../img/redlines.png) repeat-y left 50px;

Как видите, фоновое изображение должно начинаться на 50 пикселей ниже своего div, и оно работает с no-repeat , но если я установлю repeat-y , часть изображения также появится в верхней части div.

Есть ли способ избежать этого и продолжать повторять только вниз?

2

Вот как это должно работать. Для мозаичного изображения позиция — это просто начальная позиция. Я бы предложил что-то вроде:

HTML

 
    <дел>
        <дел>

CSS

 . foo {
    отступы сверху: 50px;
}
.бар
    фон: url(../img/redlines.png) repeat-y слева вверху;
}
.содержание {
    верхнее поле: -50px;
}

1

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

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

, поскольку вы не предоставили jsfiddle или какие-либо изображения, я предполагаю, что вы можете попробовать 9Атрибут 0015 background-position в css.

см. http://www.w3schools.com/cssref/pr_background-position.asp

вы можете попробовать :после в вашем контейнере, см. этот пример:jsfiddle

 
#тест {
    ширина: 500 пикселей;
    высота: 500 пикселей;
    должность: родственница;
}
# тест: после {
    содержание:"";
    положение: абсолютное;
    верх: 50 пикселей;
    слева:0;
    справа: 0;
    дно:0;
    фон: URL (http://www. gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg) повтор-у слева;
}

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Background Repeat — Master CSS

Background

90 089 повтор фона: горизонтальный | по вертикали 90 080

класс	свойства
`background-repeat: режим` `/` `bg: режим`	`повтор фона: режим`
`background-repeat: по горизонтали по вертикали`
`bg:repeat`	`background-repeat: повтор`
`bg:no-repeat`	`background-repeat: no-repeat`
`bg:repeat-x`	`background-repeat: повтор-x`
`bg:repeat-y`	`background-repeat : Repeat-y`

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

Применение с функциями

...

Мастер поддерживает собственные переменные и функции CSS , просто добавьте var( --key ) или используйте сокращение $( ключ ) для переменных.

Вы также можете использовать calc(expression) , env(expression) и другие функции CSS, если свойство их поддерживает.

Дополнительные сведения см. в документации по функциям.

Состояния и селекторы

...

Master поддерживает все собственные селекторы CSS , просто добавьте :hover , :disabled , цепочку, комбинаторы и другие селекторы CSS, как обычно.

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

Адаптивные точки останова

...

Адаптивные точки останова можно применять ко всем стилям. Некоторые доступные точки останова: 3xs , 2xs , xs , см , мд , LG , xl , 2xl , 3xl , 4xl . Произвольные точки останова можно указать с помощью операторов сравнения > , >= , < , <= .

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

Формат печати и медиа-запросы

...

Master поддерживает такие типы носителей, как print , экран , речь , все и другие медиазапросы.

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

Темный режим и цветовые схемы

...

Мастер использует селектор html.dark для поддержки цветовых схем. Теперь вы можете легко настроить свой стиль для цветовых схем.

Дополнительные сведения см.

alexxlab Автор записи

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