Как я могу получить полупрозрачный оверлей фона CSS для отображения в альбомной ориентации?

Question

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

Не уверен, как это исправить.

$primary-color: #313030;
$secondary-color: #d4fe01;
$show-home-image: true;
$home-image: url(../img/background.jpg);
$background-opacity: 0.8;

@mixin easeOut {
  transition: all 0.5s ease-out;
}

// hmm

@mixin background {
  @if $show-home-image {
    &#bg-img {
      background: $home-image;
      background-attachment: fixed;
      background-size: cover;

      &:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: rgba($primary-color, $background-opacity);
      }
    }
  }
}

https://github.com/shimanopower/newPortfolio/blob/master/dist/img/projects/LearnTerminalAssets/Screen%20Shot%202019-07-06%20at%206.56.30%20PM.png

https://github.com/shimanopower/newPortfolio/blob/master/dist/img/projects/LearnTerminalAssets/audreysmonsters.com_(iPhone%20X)%20(1).png

сайт с оверлеем: https://audreysmonsters.com

Answer 1

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

@media only screen and (max-width: 812px) and (orientation: landscape){
    #bg-img:after{
        height: 120%;
    }
}