在背景圖像中添加響應式疊加

Question

我是 CSS 新手，我想在背景圖像中添加響應式疊加層。 所以我嘗試小提琴

HTML：

<div class="MyClass__background">
   <div class="MyClass__program--overlay">
     <div class="MyClass__program--overlay-content">
       <div class="MyClass__program--info">
         <p class="MyClass__brandText PoultryMonthlyReport__program--content-headerText">Test</p>
         <p class="MyClass__program--content-subText">Programs
         </p>
         <p class="MyClass__boldText PoultryMonthlyReport__program--content-text">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
         </p>
         <br />
         <br />
         <p class="MyClass__program--content-text">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
         </p>
       </div>
       <div class="MyClass__program--media">
         <img src="/img/poultry-monthly-report/programs/poultry_program.png" />
         <div class="vr"></div>
       </div>
     </div>
   </div>
 </div>

社會保障：

.MyClass{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  &__background {
    background-image: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_509107562_2000133320009280346_351827.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
  }
  
 &__program--overlay {
    position: absolute;
    transform: translateY(40%);
    background-color: #ffffff;
    opacity: 0.7;
   
    display: grid;
    grid-template-columns: auto auto;
  }
  
 &__program--overlay-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4rem;
    max-width: 100%;
    flex: 0 50px;
  }
  
 &__program--content-headerText {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 7px;
    margin-bottom: 2rem;
  }
  
  &__program--content-subText {
    color: #000000;
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
  }
  
  &__program--content-text {
    color: #000000;
    font-size: 1.4rem;
    margin-bottom: 2rem;
    line-height: 40px;
  }
  
 &__test {
    display: none;
  }
  
 &__boldText {
    font-weight: 600;
  }
  
  &__program--info {
    flex: 45%;
  }
  
  &__program--media {
    flex: 55%;
  }
}

但是由於某種原因，我無法在圖像的中心對齊，它只是超出了邊距，我想將它與所有方向的一些填充對齊（沒有覆蓋 100% 的背景照片）

我嘗試更改覆蓋內容的填充，但它只是向各個方向擴展，它不關心父級（背景圖像）

我該如何解決這個問題？ 問候

圖像

Answer 1

嘗試將您的疊加 CSS 更改為這樣的內容以完成響應式疊加。

 &__program--overlay {
    height: 100%;  /* refers to 100% of parent (&__background) */
    background-color: #fff;
    opacity: 0.7;
  }