固定蒙版图像背景颜色和可滚动背景图像?

问题描述 投票:0回答:1

我正在建立一个具有相当特殊背景的小型网站。

我的目标是将蒙版背景图像渐变应用于重复的背景图像图案(flowers.png),渐变背景保持固定,并且当用户滚动时图案会发生变化以匹配它。

渐变背景颜色始终是屏幕的大小,因此花朵在屏幕底部会是粉红色,当滚动到顶部时会变成黄色。

我目前的尝试不起作用,因为花朵保持白色,但我什至不知道这是否可行,或者是否有更简单的方法来完成我需要的事情。

.visitors-layout {
  position: relative;
  z-index: 1;
  background-color: lightblue;
}

.visitors-layout .content {
  position: relative;
  z-index: 2;
  color: grey;
}


/* This will scroll with the content */

.visitors-layout::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://picsum.photos/600/300");
  background-size: 600px 300px;
  background-repeat: repeat;
}

.visitors-layout::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient( 180deg, rgba(255, 229, 0, 1) 0%, rgba(255, 0, 239, 1) 100%);
  -webkit-mask-attachment: fixed;
  mask-image: linear-gradient( 180deg, rgba(255, 229, 0, 1) 0%, rgba(255, 0, 239, 1) 100%);
  mask-attachment: fixed;
}
<body class="visitors-layout">
  <div class="content">
    <h1>This is a simple HTML + CSS template!</h1>

    <p>
      Mumblecore fam flexitarian, hoodie skateboard blackbird spyplane kickstarter pop-up pinterest selvage you probably haven't heard of them tumeric. Try-hard woke flexitarian keytar scenester offal. Pork belly flexitarian copper mug big mood fanny pack prism.
      Cardigan gorpcore crucifix bruh, irony church-key helvetica try-hard woke mixtape. Taxidermy godard seitan, bruh authentic edison bulb air plant vibecession kitsch flannel. Intelligentsia etsy single-origin coffee authentic. Marxism microdosing
      chambray echo park, jianbing subway tile tacos chartreuse knausgaard.
    </p>

    <p>
      Echo park art party blackbird spyplane swag readymade sartorial lyft fashion axe PBR&B same offal iceland drinking vinegar VHS viral. Fingerstache venmo plaid yes plz four loko swag cupping vape praxis chambray hell of retro drinking vinegar fixie umami.
      Sartorial green juice hoodie salvia. Bruh tumeric echo park photo booth. Mustache gatekeep yuccie, pop-up sriracha photo booth banh mi jawn lo-fi four dollar toast chambray shaman. Gastropub yr yuccie PBR&B keffiyeh seitan. Keytar neutra vape bushwick
      crucifix snackwave squid dreamcatcher hella biodiesel etsy XOXO.
    </p>
  </div>
</body>

css mask linear-gradients
1个回答
0
投票

为了使花朵颜色在黄色和粉色之间变化变得有意义,我假设您的背景

flower.png
图像没有着色。在这种情况下,您可以只使用两个背景(选择黄色图像为
background-attachement:fixed
)并使用
background-blend-mode
来获得您想要的结果。

.visitors-layout {
  position: relative;
  z-index: 1;
  background-color: lightblue;
}

.visitors-layout .content {
  position: relative;
  z-index: 2;
  color: grey;
}

.visitors-layout::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://i.sstatic.net/eAfwF0bv.png"), linear-gradient( 180deg, rgba(255, 229, 0, 1) 0%, rgba(255, 0, 239, 1) 100%);
  background-size: cover / 100% 100vh;
  background-repeat: repeat / no-repeat;
  background-attachment: scroll, fixed;
  background-blend-mode: multiply;
}
<body class="visitors-layout">
  <div class="content">
    <h1>This is a simple HTML + CSS template!</h1>
    <p>
      Lorem ipsum odor amet, consectetuer adipiscing elit. Feugiat at himenaeos maecenas tempus hendrerit suspendisse eros non senectus. Mollis nec dictum venenatis maximus nisl suscipit magnis lacus. Ornare inceptos scelerisque quisque sollicitudin leo dis.
      Ornare erat vitae consectetur porta venenatis. Fermentum pharetra nec adipiscing morbi habitasse tellus inceptos. Non justo imperdiet curabitur ornare pellentesque euismod. Tempor hendrerit lacus finibus a senectus facilisi aliquet. Leo erat tristique
      eu porta taciti penatibus. Arcu dolor quisque adipiscing fringilla mus nullam. Taciti dignissim taciti quam curabitur rutrum. Non fermentum posuere primis turpis venenatis. Accumsan ex netus rhoncus primis vel in taciti auctor. Etiam sem a egestas
      iaculis elit pulvinar vitae hendrerit. Eleifend bibendum facilisis dapibus at id mauris gravida efficitur. Auctor vivamus etiam mauris habitasse nascetur est risus. Tortor vestibulum rhoncus per auctor vehicula massa habitasse potenti accumsan.
      Montes tortor adipiscing montes metus nunc nullam. Quis orci posuere pharetra nullam magna mattis. Massa tempus class vehicula hendrerit orci nec commodo. Donec sollicitudin congue faucibus dictumst cubilia fusce. Interdum ipsum metus ex tortor;
      felis mi. Vel dictum nisl aptent nunc fermentum litora, pulvinar tristique. Litora iaculis eu rhoncus nam torquent. Vel massa rhoncus aenean tellus parturient. Molestie nunc placerat mattis feugiat fringilla. Tristique egestas euismod aptent justo
      nascetur hac. Conubia vivamus curae per scelerisque nam sodales eros tristique quis. Parturient maximus ornare enim suscipit sociosqu natoque. Curae amet posuere ligula semper fusce himenaeos. Lobortis condimentum penatibus maecenas habitasse senectus.
      Dictumst mi placerat aptent facilisi diam; praesent mauris dignissim. Ornare eget nostra condimentum sociosqu quisque nam habitant. Accumsan mattis congue sollicitudin fusce sem nec velit. Quam egestas augue habitasse egestas dui egestas. Integer
      potenti parturient imperdiet euismod platea penatibus nisl ad. Fames enim magnis nisi finibus facilisi consequat non dictum. Nostra fermentum in ante elit lacinia turpis iaculis elementum ultricies. Magna ultricies ante maecenas rutrum dictum fringilla
      parturient. Velit litora congue donec; ac nascetur est. Condimentum tellus mauris leo vivamus odio duis interdum? Ipsum erat adipiscing fringilla est non nascetur. Suspendisse nibh enim tristique non sociosqu vivamus egestas nullam. Viverra orci
      quam felis; quam pellentesque non lorem. Eros rhoncus est sed ullamcorper proin taciti senectus felis phasellus. Fermentum sem nisl ultricies risus cubilia fringilla. Duis duis quam tellus inceptos ipsum dapibus, massa class. Et non faucibus risus
      at class iaculis hendrerit. Lectus lobortis cras suscipit sagittis maximus egestas. Dui dapibus sapien diam dolor quis. Ac quisque ante ipsum adipiscing; congue penatibus imperdiet efficitur nascetur. Amet sem vel elementum nisi aptent. Nascetur
      hendrerit aliquet diam, ipsum condimentum dictumst. Quam eros erat non venenatis auctor potenti nullam. Ultrices volutpat feugiat pharetra eget quis tortor rutrum. Eleifend torquent ornare orci imperdiet cubilia posuere blandit diam. Odio at morbi
      velit auctor mus odio convallis adipiscing? Condimentum augue metus torquent sit lobortis egestas vivamus fusce phasellus. Ex maecenas morbi luctus; montes duis vivamus. Non phasellus nisl habitant litora aptent lectus aenean. Nulla duis ad vivamus
      sit nibh vitae. Feugiat id convallis mollis nullam eros morbi penatibus. Class conubia sapien curae nulla orci dolor risus. Ante nulla aptent ligula tristique porta dictumst felis. Quisque tincidunt nulla porttitor per laoreet eros pulvinar pretium.
      Urna habitant cras pharetra nisl ridiculus cursus ultrices. Elementum imperdiet metus nostra per semper fermentum hac. Sed consectetur commodo mollis fusce consectetur ante ligula hendrerit. Tempor ac egestas ornare; quis augue faucibus fusce vitae.
      Phasellus habitant dui eget nec integer habitasse facilisi placerat. Euismod vehicula rhoncus aptent maecenas odio, natoque montes. Facilisi lacinia primis libero id nulla dui. Neque tincidunt ridiculus vivamus duis sollicitudin rhoncus molestie
      vulputate. Consequat donec suscipit ultrices maximus purus. Ligula massa fringilla urna cubilia conubia aenean. Himenaeos netus posuere duis maximus est facilisis senectus justo.
      Ligula massa fringilla urna cubilia conubia aenean. Himenaeos netus posuere duis maximus est facilisis senectus justo.
    </p>
  </div>
</body>

© www.soinside.com 2019 - 2024. All rights reserved.