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%;
    }
}

如何获得半透明的CSS背景叠加层以横向显示？

1 个答案: