Question

我有两个问题想问您，我很乐意为您提供帮助：）

此站点的标题是2个背景（BG）img并排放置的，没有任何可用空间... BG是巨大的图像，我的第一个问题是：

我正在尝试修复滚动时（css中的第18行）的影响，但是看起来图像显示得多么糟糕。有什么想法吗？
我放入滤镜：亮度（50％）；悬停显示的人也有亮度，这确实很愚蠢，但事实如此！希望对我有帮助：）

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

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

具有“固定”和“亮度”的CSS背景问题

1 个答案: