據我所知，non-standard-WebKit-mask-attachment CSS屬性用于控制CSS遮罩如何附加到元素，就像現有的backgro und-attachment屬性在背景上工作一樣。這似乎正是我需要的CSS技巧，但是-webkit-mask-attachment從未被廣泛實現，看起來要被放棄了。還有什么我可以用來近似的效果-例如，有一個元素的遮罩圖像的行為像一個背景的背景-附件:固定的？

我想要的特殊效果是讓一個段落有不同于實際文本的文本陰影。足夠容易；請參見代碼片段。但是我還想讓交替反射只在屏幕中央可見(代碼片段中的紅線)，而正常反射顯示在其他地方。

在代碼片段中，你應該可以看到我想要什么；基本上，我希望版本1顯示在紅色區域外，版本2顯示在紅色區域內。

這似乎不可能用任何數量的z-index和mask-image技巧來實現，除非您有-webkit-mask-attachment: fixed或類似的東西，盡管我當然愿意接受建議。

我也許可以用Javascript在用戶每次滾動時通過操縱掩碼位置來做到這一點，但這真的很難看，我擔心它會滯后。我希望有一個純粹的CSS解決方案，如果有的話。

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

let showAlternate = false;

function swapOut() {
  if (!showAlternate) {
    $$(".alt-reflect").forEach(e => e.style.visibility = "visible");
    $$(".no-reflect").forEach(e => e.style.textShadow = "none");
    $("#thebutton").innerHTML = "This is version 2; click to swap";
  } else {
    $$(".alt-reflect").forEach(e => e.style.visibility = "hidden");
    $$(".no-reflect").forEach(e => e.style.textShadow = "25vw 0 4px black");
    $("#thebutton").innerHTML = "This is version 1; click to swap";
  }
  showAlternate = !showAlternate;
}

p {
  color: black;
  padding: 0 30vw;
  text-shadow: 25vw 0 4px black;
}

p.alt-reflect {
  margin: 0;
  position: absolute;
  color: transparent;
  text-shadow: 25vw 0 4px black;
  visibility: hidden;
}

#background {
  background: linear-gradient(to bottom, red, red) center/100% 20vh fixed no-repeat;
}

<button id="thebutton" onclick="swapOut()">This is version 1; click to swap</button>

<div id='background'>
  <p class='alt-reflect'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  <p class='no-reflect'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.fjdipwoiejfpwopwoeif jwpoeifjwpoefijwpoefijwepqoiew jpoeijfpqoiwefjpoqijfpqosidjfa
    pildfj;alkjbpoadnfs;dilfj; zlxkvbn;ozsdfhaposidfjao;dsklf</p>
</div>