CSS "fixed" 和 "brightness" 的背景问题

Question

我有两个问题想问你，我很乐意帮助我:)

Header 这个网站有 2 个并排的背景 (BG) imgs，没有任何免费 space... BGs 是巨大的图像，我的第一个问题是：

我正在尝试修复它们以在滚动时产生效果（css 中的第 18 行），但看看图像显示的效果如何。有什么想法吗？
我放滤镜：亮度(50%)；悬停显示的人也有亮度这真是愚蠢但事实！能帮到我就好了:)

CODEPEN

background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center;

Answer 1

将两张图片作为一张图片的背景"section"

html:

<section id="gtco-hero" class="custom-style-parent" data-section="home">
        <div class="cs-parent">
            <div class="col-xs-6 custom-style custom-image-1">
                <a class="bg-text-cs" href="#">Los Angeles</a>
            </div>
        </div>
        <div class="cs-parent">
            <div class="col-xs-6 custom-style custom-image-2 cs-right">
                <a class="bg-text-cs" href="#">Los Angeles</a>
            </div>
        </div>
 </section>

css:

#gtco-hero {
  display:block;
  width:100%;
  height:100vh;
  background: 
      url("https://wallpaperbrowse.com/media/images/4052451-images.jpg"),
      url("https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg");
  filter: brightness(80%);
  background-size: 50% auto, 50% auto;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: left, right;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

#gtco-hero:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    filter: brightness(50%);
}

https://codepen.io/carolmckayau/pen/eQrEWX

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

CSS "fixed" 和 "brightness" 的背景问题

CSS background problem with "fixed" and "brightness"

html

css

background-image