Блог

как я пытаюсь это представить

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

 lt;div class="containerBox"gt; lt;div class="text-box"gt;  lt;h4gt; Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Oragnic Tealt;/h4gt; lt;/divgt; lt;img class="img-responsive" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg"gt;  

 .containerBox { position: relative; display: inline-block; } .text-box {  position: absolute;   height: 100%;  text-align: center;   width: 100%; } .text-box:before {  content: '';  display: inline-block;  height: 100%;  vertical-align: middle; } h4 {  display: inline-block;  font-size: 20px; /*or whatever you want*/ } img {  display: block; }  

Есть много способов сделать это. Зависит от того, что вам конкретно нужно.

Если вы можете отпустить тег img и использовать фоновое изображение (которое в целом считается лучшим), я рекомендую использовать следующий фрагмент кода. (Это может содержать дополнительные строки кода, но это решает задачу, пожалуйста, удалите эти дополнительные строки.)

 lt;div class="containerBox"gt;  lt;div class="text-box"gt;  lt;h4gt; Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Oragnic Tealt;/h4gt;  lt;/divgt; lt;/divgt;  lt;stylegt;  .text-box {  display: grid;  /* Or Flex */  place-items: center;  /* Or For Flex use align-items and justify-content */  position: absolute;  height: 100%;  width: 100%;  text-align: center;  }    .text-box::before {  content: '';  background: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg') no-repeat center center/cover;  height: 100%;  width: 100%;  position: absolute;  top: 0;  left: 0;  z-index: -1;  opacity: 1;  /* Opacity: as you like */  }    h4 {  display: grid;  place-items: center;  height: 20%;  width: 1000px;  color: white;  background-color: rgba(0, 0, 0, 0.541);  /* Or whatever you want */  } lt;/stylegt;  

Если вам нужен тег img:

 .containerBox { position: relative; display: inline-block; }  .text-box {  position: absolute;  height: 100%;  width: 100%;  text-align: center;  z-index: 1; }  h4 {  display: grid;  place-items: center;  height: 30%;  width: 80%;  font-size: 20px;  background-color: rgba(0, 0, 0, 0.555);  /*or whatever you want*/ }  img {  display: block; }  

Если под цветом фона вы подразумевали цвет фона текстового поля, то вам нужно уменьшить его высоту и ширину, иначе используйте ::перед псевдо-селектором и установите его высоту и ширину.