Блог

Главная - Вопросы по программированию - Текст на фоновом изображении не реагирует

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

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

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

 #background {
  background: url("../../imgs/88246.jpg") no-repeat;
  background-size: 100%;
}  
 <div class="h-100 container-fluid">
  <div id="background" class="row h-100 justify-content-center align-items-center">
    <h1 class="display-4">AYMAN TARIG</h1>
  </div>
</div>

Комментарии:

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

2. Если текст не является частью изображения, вы можете управлять им с помощью CSS, медиа-запроса или с помощью vw measures.

3. @pokeybit как использовать два изображения?

4. Измените размер фона на background-size: cover; , а затем вы можете изменить свой background-position , если хотите

5. @AymanTarig используйте css position:absolute;left:0px;top:0px; для изображения, которое вы хотите разместить сверху, и разместите его после изображения, которое вы хотите разместить внизу. Не забудьте назначить position:relative; родительскому контейнеру, если он не установлен по умолчанию. Возможно, вам также потребуется использовать css z-index , который определяет, какой элемент dom отображается сзади или спереди. Google — твой друг 🙂

Ответ №1:

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

Вот пример того, как вы можете заставить это работать:

 #background {
  background: url("https://images.unsplash.com/photo-1547845737-153b5373560f?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=2531amp;q=80") no-repeat;
  background-size: cover;
}

.h-100 {
  height: 20%;
  width: 25vw;
  overflow: hidden;
}

h1 {
  display: block;
  font-size: 6vw;
}

Если вы перейдете в этот codepen, вы сможете увидеть, о чем я говорю, в действии:

https://codepen.io/MatthewRader/pen/aMrvrx

Ответ №2:

ПЛАНШЕТ

  @media screen and (max-width: 1024px){
 h1 { font-size:SIZETHATFITS}}

ТЕЛЕФОН

  @media screen and (max-width: 480px){
 h1 { font-size:SIZETHATFITS}}

@media screen и (max-width: #px) будут влиять на размер шрифта только до этой максимальной ширины.