CSS фоновая проблема с «фиксированной» и «яркостью» - PullRequest
Новая
       6

CSS фоновая проблема с «фиксированной» и «яркостью»

0 голосов
/ 24 ноября 2018

У меня к вам два вопроса, и я буду рад помочь мне:)

Заголовок этого сайта с двумя фоновыми изображениями (BG) рядом друг с другом без свободного места ... BG огромныизображения и мой первый вопрос:

  1. Я пытаюсь исправить их для эффекта при прокрутке (строка 18 в CSS), но посмотрите, как ужасные изображения отображаются.Есть идеи?

  2. Я поставил фильтр: яркость (50%);и тот, кто отображается при наведении, также имеет яркость, которая действительно глупа, но факт!Мне будет приятно помочь:)

CODEPEN

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

1 Ответ

0 голосов
/ 24 ноября 2018

делает оба изображения фоном одного "сечения"

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

...