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

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я попытался добавить верхний отступ с многочисленными значениями пикселей в стиле, но отступ изображения относительно веб-страницы отказался меняться. ie padding-top: 5px; .. Отрывок моего кода приведен ниже:-

 <div class="row pb-5 mt-4" style="background-color: rgba(3, 31, 45, 0.5);">
          style="background-image: url('images/image1.jpg'); 
          background-repeat: no-repeat; background-position: center; background-size: cover; 
          position: relative; border-radius: 10px 0 0 10px; padding-top: 5px;">
</div>

1. У вас есть опечатки в вашей разметке, которые, я уверен, не связаны с проблемой. Пожалуйста, поправьте, если это так. У вас есть закрывающий символ ‘>’ в конце первой строки и дублирующий атрибут ‘style’.

Ответ №1:

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

В настоящее время у вас есть background-position: center;

Попробуйте изменить это на background-position: center 20px;

Смотрите:https://www.w3schools.com/CSSref/pr_background-position.asp для получения дополнительных примеров

1. Отлично, спасибо! сработало как по волшебству 🙂 хотя единственная проблема в том, что он удалил добавленные мной радиусы границ.

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

Ответ №2:

Вы можете просто сделать это, добавив атрибут стиля:

 background-position: 0 5px;
background-repeat: no-repeat;

Ответ №3:

Вы можете попробовать это

       background-position-y: 5px!important;
      background-position: center;

Ответ №4:

В этом случае решение такое background-position , как упоминалось в других.

border-radius проблема нормальная. Пожалуйста, проверьте приведенный ниже код, чтобы понять. Представьте, что ваш div представляет собой прямоугольник, и на нем есть ваше фоновое изображение. Когда вы играете с background-position , вы перемещаете изображение, но не сам div. Таким образом, свойство radius остается на своем месте и не изменяется.

         html, body{

            height: 100%;
            width: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .outer{
            height: 100%;
            width: 100%;
            background-color: rgba(3, 31, 45, 0.5);
            padding-top: 5%;
        }

        .inner-with-bg{
            width: 50%;
            height: 50%;
            margin: 0 auto;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png);
            background-position: 30px 10px;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 60px 0 0 60px;
            border: 1px solid red;
        }

 <div class="outer">
  <div class="inner-with-bg">          
  </div>
</div>