Css background margin: css — Background position, margin-top?

Разное 

css властивість background-position

  • Головна
  • css
  • властивості
  • background-position

Властивість background-position задає початкову позицію (зміщення) фонового зображення. Без задання, тло знаходиться в лівому верхньому куті елемента і повторюється як по вертикалі, так і по горизонталі.

Властивість background-position може отримувати до чотирьох значеннь.

Якщо зміщення задане одним значенням, це значення вказує горизонтальне зміщення. Браузер встановлює вертикальне позицію по центру автоматично.

Якщо двома значеннями, перше значення — горизонтальне зміщення, а друге значення — вертикальне зміщення.

Синтаксис три або чотири значення змінюється між ключовими словами та довжиною або відсотковими одиницями. Ти можеш використовувати будь-яке значення ключових слів, за винятком центру, у трьох-або чотиризначній декларації у фоновому режимі.

Коли ти вказуєш три значення, браузер інтерпретує «відсутнє» четверте як 0.

Дивись 3 приклад.

Перелік деяких можливих значень:

  • <відсотки> <відсотки> — перше значення визначає позицію по горизонталі, друге — по вертикалі. Наприклад, 0% 0% — верхній лівий кут. 100% 100% — правий нижній.
  • <відсотки> — горизонтальна позиція картинки у відсотках від 0% до 100%. Вертикальне значення буде рівним 50% (= посередині).
  • <розмір> <розмір> — вказує місце розташування (перше значення — по горизонталі і друге — по вертикалі, відповідно) з використанням прийнятих в CSS розмірних величин.
  • <розмір> — горизонтальне положення тла, вказане одним з прийнятих в CSS розмірних величин. Вертикальне значення буде рівним 50% (посередині).
  • left top — верхній лівий кут — те ж саме, що 0% 0% або top left.
  • top — посередині, нагорі. Те ж саме, що і 50% 0%, top center, center top.
  • right top — верхній правий кут. Те ж саме, що і 100% 0%, top right.
  • left — зліва, посередині. Те ж саме, що і 0% 50%, left center, center left.
  • center — по центру. Те ж саме, що і 50% 50%, center center.
  • right — праворуч, посередині. Те ж, що і 100% 50%, right center, center right.
  • left bottom — знизу ліворуч. Те ж саме, що і 0% 100%, bottom left.
  • bottom — посередині, внизу. Те ж, що і 50% 100%, center bottom, bottom center.
  • right bottom — правий нижній кут. Те ж саме, що і 100% 100%, bottom right.

Як ти помітив з цих прикладів, ключові слова це скорочення від відсотків, адже лаконічніше сказати top right ніж 0% 100%. Тому використовуй їх це полегшить сприйняття інформації.

Допустимо вказувати кілька зміщень для кожного тла, перераховуючи значення через кому.

Також підтримуються від’ємні значення. Вони встановлюють обернені зміщення, найчастіше при таких зміщеннях тло виходить за кордони елемента.

Отже:

  • якщо дано тільки одне значення, то воно застосовується до горизонтального зміщення, при цьому вертикальне дорівнюватиме 50% (посередині), але коли застосовуються ключові слова, то їх порядок не має значення, браузер все визначить самостійно. горизонтальне зміщення може бути вказано за допомогою ключових слів — left, center, right, а вертикальне — top, center, bottom. Крім використання ключових слів, зміщення також можна задавати величини у відсотках, пікселях або інших одиницях.
    також ти мав, зрозуміти, що center 10% та 10% center будуть мати різний результат.* Комбінація ключових слів може бути вказана в будь-якому порядку, в той же час за комбінацією величини і ключового слова треба слідкувати, тому, що якщо першим значенням є величина (а перше значення обов’язково вказує на горизонтальне зміщення), то другим значенням не можуть бути ключові слова, такі як left та right, а от top та bottom можуть.

Приклад:

/* Правильно */

left center;

center left;

10px top

30% bottom

left 30%;

/* Неправильно */

30% left;

10px right;

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

background-position: value;

Властивість background-position може отримувати 4 значення:

x% y%

Перше значення є горизонтальне положення, а друге значення це вертикальна. Верхній лівий кут 0% 0%. У нижньому правому куті на 100% 100%. Якщо вказати тільки одне значення, інше значення становитиме 50%.

xpos ypos

Перше значення є горизонтальне положення, а друге значення це вертикальна. Верхній лівий кут дорівнює 0 0. Одиниці можуть бути пікселі (0px 0px) або будь-які інші одиниці CSS. Якщо вказати тільки одне значення, інше значення становитиме 50%. Ви можете змішати % і позиції

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивостей від свого батьківського елемента (якщо відповідна властивість встановлена)

Значення без задання:0% 0%
Наслідує:Ні
Анімується:Так
JavaScript синтаксис:object.style.backgroundPosition=»center»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
одне тло

1. 0

4.0

1.0

1.0

3.5

декілька тла

1.0

9.0

3.6

1.3

10.5

Переглядач
одне тло

2.1

1.0

3.2

декілька тла

2. 1

1.0

3.2

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3
  • Приклад 4
  • Приклад 5
  • Приклад 6

Динамічний приклад

Демонстрація роботи властивості
Демонстрація роботи властивості
Демонстрація роботи властивості
background-position для різної кількості значень
Синтаксис властивості
.box {


  background-position: 25% 45px; 


}
Додаткові посилання
background-color
background-size
background-image
background-blend-mode
background-attachment
background-repeat
background-origin
background-clip
background
 css — Как добавить поля только к фоновому изображению? 
 спросил 
 Изменено
 1 год, 8 месяцев назад
 Просмотрено
 74к раз
 Я хочу добавить отступ к фоновому изображению, чтобы отдалить его от середины экрана, но добавление его внутри этого класса добавляет отступ ко всему телу.
   
 body.poppage {
    фон: url(/Imagenes/tip3.png) 50% 200px без повторов #E2E4E9;
}
 
 Как мне это сделать? Спасибо
 Используйте заполнение контейнеров, чтобы сделать своего рода поле для фона.
 <дел>
    
ЭЙ!
div.thebox { box-sizing: граница-коробка; ширина: 400 пикселей; высота: 400 пикселей; граница: 2px сплошная #000000; отступ: 10 пикселей; фон: URL(http://studio-creator.com/blog/public/html5.jpg) по центру; размер фона: содержит; фоновый повтор: без повтора; background-origin: поле содержимого; }

https://jsfiddle.net/gann1pwm/

3

вы можете использовать свойство background-position

2

эта работа со мной у меня есть панель навигации 50px

 размер фона: содержит !важно;
background-repeat: no-repeat !important;
background-position: 0 50px !важно;

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

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

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

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

Вы можете добавить поля (вроде) с помощью этого

 фоновая позиция-у

для оси Y (поле-y) и

 background-position-x

для оси x (margin-x)

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

мой instagram @deanpi_ или @alfarisi.milham

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

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

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

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

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

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

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

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

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

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

html — Почему поле не заполняется фоновым цветом в CSS?

У меня есть простой HTML-код.

Почему цвет фона не заполняет весь фон элемента #footer , в частности, включая поля?

 

<голова>
  <стиль>
    #нижний колонтитул {
      фон: #263238;
      поле: 100 пикселей;
      заполнение: 0;
    }
    .нижний колонтитул {
      маржа: 0;
      цвет: #fff;
    }
  

<тело>
  <дел>
    
Все права защищены © 2016
  • HTML
  • CSS
  • поля

3

Вы должны использовать padding вместо margin , как описано в блочной модели CSS.

  • Margin обеспечивает пространство за полем элемента, и поэтому не будет окрашенным — это просто пространство.

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

 

  
  <голова>
     <стиль>
        #нижний колонтитул {
           фон: #263238;
           отступ: 100 пикселей;
        }
        . нижний колонтитул {
           маржа: 0;
           цвет: #fff;
        }
     
  
    
  <тело>
     <дел>
        
Все права защищены © 2016

1

Вот как работает блочная модель css. Фон применяется только к областям padding и content , поэтому вы не видите фон на полях. исправить просто, просто измените margin на padding .

Вы можете использовать дополнение .

Если вы можете использовать поле , тогда остается пространство за пределами границы и отступ это оставить место внутри границы. Так что это идеально подходит для вас, используя padding .

 #нижний колонтитул{фон: #263238; отступ: 100px;}
 .footer-text{поле: 0;цвет: #fff;} 
 

        
Все права защищены © 2016

Попробуйте указать border: 1px сплошной прозрачный для родительского элемента тега p.

 
    
        <голова>
           <стиль>
              #footer{фон: #263238;отступ: 100px;}
              .нижний колонтитул {поле: 0; цвет: #fff;}
           
        
        <тело>
            <дел>
                
Все права защищены © 2016

Поля применяются вне поля, а заполнение применяется внутри поля.

Вот пример полей/отступов.

http://www.goer.org/images/html/boxbasic.png

4

Margin не включается в Box-модель вашего div.

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

 #нижний колонтитул {
  фон: #263238;
  маржа: 0;
  отступ: 100 пикселей;
}

Но если вы ищете другой цвет снаружи, вы можете получить это, используя border следующим образом:

 #footer {
  фон: #263238;
  маржа: 0;
  заполнение: 0;
  граница: 100px сплошной зеленый цвет;
}

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

No related posts.

Автор записи

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

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