從挖空文本創建視差背景效果

Question

我正在嘗試使用一些挖空文本創建視差背景效果。 我面臨兩個問題：

當background-size: contain; 已設置。
無論出於何種原因，視差效果在 Codepen 之外不起作用 - 當在 chrome 中完全放大時，效果消失並且表現得就像背景粘在鼠標上一樣......我不確定這是否是縮放問題或 chrome 和我的方法有問題。

這是我的代碼：

 (function() { // Add event listener document.addEventListener("mousemove", parallax); const elem = document.querySelector("#text"); // Magic happens here function parallax(e) { let _w = window.innerWidth / 2; let _h = window.innerHeight / 2; let _mouseX = e.clientX; let _mouseY = e.clientY; let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${50 - (_mouseY - _h) * 0.01}%`; let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${50 - (_mouseY - _h) * 0.02}%`; let _depth3 = `${50 - (_mouseX - _w) * 0.06}% ${50 - (_mouseY - _h) * 0.06}%`; let x = `${_depth3}, ${_depth2}, ${_depth1}`; console.log(x); elem.style.backgroundPosition = x; } })();

 .background { background: #000; } #text { background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80"); /*background-size: contain;*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 8vw; }

 <body class="background"> <h1 id="text"><b>Galaxy</b></h1> </body>

Answer 1

解決方案原來是它取決於圖像的大小，它似乎必須小於容器（在本例中為整個屏幕/主體）才能使其工作。

我在上面的代碼筆中使用的圖像與我在本地實例中使用的圖像不同。 為了使其正常運行，我簡單地應用background-size: 50%; 到我更大的本地背景圖像，這樣它的行為更像代碼筆中使用的更小的背景圖像。

從挖空文本創建視差背景效果

問題描述

1 個解決方案

解決方案1
0 2022-05-05 00:10:03

從挖空文本創建視差背景效果

問題描述

1 個解決方案

解決方案1 0 2022-05-05 00:10:03

解決方案1
0 2022-05-05 00:10:03