色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

-WebKit-background-clip:text and transform:translate z(-300 px)同一元素上的scale(2.1)導(dǎo)致沖突

CSS
黃文隆2年前9瀏覽0評論

我有一個(gè)正在使用transform的元素:translate z(-300 px)scale(2.1)；以便創(chuàng)建視差滾動(dòng)效果。但是我還試圖使用-webkit-background-clip:text在該元素的圖像上添加一個(gè)文本剪輯；和相關(guān)屬性。當(dāng)我禁用變換時(shí)，文本剪輯工作，但是視差停止工作。但是，當(dāng)啟用轉(zhuǎn)換時(shí)，文本剪輯會(huì)消失。這是z索引問題嗎？我該如何解決？

相關(guān)CSS:

html {
          scroll-behavior: smooth;
        }
html, body{overflow:hidden;}

*, :before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.parallax {
                  position:relative;
                height: 500px; /* fallback for older browsers */
                height: 100vh;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-perspective: 300px;
                perspective: 300px;
                  scroll-behavior: smooth;
              }
              .parallax__group {
                position: relative;
                height: 500px; /* fallback for older browsers */
                height: 100vh;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
              }
              .parallax__layer {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
              }
    
/*  Disabling the transforms in the following class will enable the text clipping, but disable the parallax */


              .parallax__layer--back {
                -webkit-transform: translateZ(-300px) scale(2.1);
                transform: translateZ(-300px) scale(2.1);
                /*z-index: -3;*/
              }
#group2 .parallax__layer--back {
            
                  background-image: url('https://png.pngtree.com/background/20210712/original/pngtree-modern-double-color-futuristic-neon-background-picture-image_1181573.jpg');
                 background-size: cover;
                 height: 100vh;
                 overflow: hidden;
                 left:0;
              }
        .gap{
            height:auto;
            min-height: 100vh;
            width: 100vw;
            background: #fff; 
            position: relative; 
            z-index: 4;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            display: flex; 
            flex-flow: column; 
            align-content: center; 
            justify-content: center;
        }
        
/* Clip text element */
.clip-text {
    font-size: 10vh;
    font-weight: bold;
    line-height: 1;
    position: relative;
    display: inline-block;
    margin: auto;
    padding: 45vh 15%;
    width: 100vw;
    height: 100vh;
    text-align: center;
    color: var(--color8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.clip-text:before,
.clip-text:after {
  position: absolute;
  content: "";
  
}

/* Background */
.clip-text:before {
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: inherit;
    background-size:cover;
}

/* Text Background */
.clip-text:after {
  position: absolute;
  z-index: -1;
  top: 25%;
  right: 15%;
  bottom: 25%;
  left: 15%;
  background-color: #fff;
    opacity:.6;
}

<HTML>
<body>
<div class="parallax">  
 <div id="group2" class="parallax__group">
             
              <div class="parallax__layer parallax__layer--back clip-text ">
                  Brand
              </div>
    </div>
<div class="gap">Some text goes here</div>
 </div>
</body>
</html>