我正在嘗試實作類似于固定背景附件的效果。我可以使用clip-path或獲得我想要的結果-webkit-mask-image，但是在 Chrome 上，有時固定影像會在它離開視圖時隱藏，當我向后滾動時，它不會顯示，直到我選擇某些內容或更改瀏覽器寬度。我已經在 Firefox 和 Edge 上對此進行了測驗，它們都很好。
我想知道是什么問題，有沒有辦法解決這個問題。
gif 問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Issue</title>
<style>
.parent {
position: relative;
width: 500px;
height: 200px;
background: lightcoral;
clip-path: inset(0);
box-sizing: border-box;
}
.child {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-image: url("https://picsum.photos/800/400");
}
.filler {
width: 100%;
min-height: 2000px;
}
</style>
</head>
<body>
<div class="parent">
<span class="child"></span>
</div>
<div class="filler"></div>
</body>
</html>
uj5u.com熱心網友回復：
除了position: fixed在您的子元素上使用外，您還需要應用background-attachment: fixed. 這兩種樣式都是必需的。
uj5u.com熱心網友回復：
clip:rect幾個月前，我經歷了一個痛苦的嘗試開始作業的程序，遇到了與您相同的問題（我知道您沒有使用clip:rect）。潛在的問題是，在重新加載頁面時，如果該clip:rect區域當前不在視圖中，則不會呈現其中的內容。
在開發人員面板中調整螢屏大小或關閉樣式然后重新打開會正確地重新渲染我的影像，但這不是解決方案，只是問題的證據。
對我來說，使用 的解決方案clip:rect是在元素內的內容position上使用樣式。我最初使用定位，但它需要是or 。clip:rectrelativefixedabsolute
請檢查您使用的定位，看看這是否有幫助。
另外一個注意事項——也是非常令人沮喪的——我當時測驗的瀏覽器是 Chrome、移動設備和桌面。一旦我完成了開發并對其進行了徹底的測驗，我就讓它運行得很好。今天，具有諷刺意味的是，唯一不能處理我的clip:rect內容的瀏覽器是桌面 Chrome！
這一定是桌面 Chrome 的最新更新......回到繪圖板。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/367320.html
標籤：javascript html css 谷歌浏览器
上一篇：GoogleChromeWebSerialAPI：如何配置ModbusRTU的引數？
下一篇：是否有更短版本的正則運算式？