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

Question

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

该站点的标题有 2 个并排的背景 (BG) imgs，没有任何可用空间...BGs 是巨大的图像，我的第一个问题是:

1. 我正在尝试修复它们以在滚动时产生效果(css 中的第 18 行)，但看看图像显示的效果如何。有什么想法吗？

2. 我放滤镜:亮度(50%)；悬停显示的人也有亮度这真是愚蠢但事实!能帮到我就好了:)

CODEPEN

背景大小:覆盖；
背景重复:不重复；
背景附件:已修复；
背景位置:中心；

Answer 1

将两张图片作为一个“部分”的背景

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