Question

我遇到问题，为下面的代码情况找到元素堆叠和不透明度的默认行为的好方法。我可能不得不在我的代码中重新排列一些东西，但这次似乎找不到合适的解决方案，我需要一些建议。
我需要记住什么，或者在这里可以使用哪些解决办法永久强制在最顶部位置减少不透明度的蓝色方块并将画布保持在下方？

var rangeVal = document.getElementById('rangevalue');
var updateVal = function(val) {
  rangeVal.innerHTML = val;
};
updateVal(range.value);
var imgBlue = document.getElementsByClassName("page-header")[0];
range.addEventListener("input", function(value) {
    imgBlue.style.opacity = this.value / this.max;
});

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

.page-header:after {
  background-image: url(https://i.imgur.com/gkvp6Jn.jpg);
  height:100%; width: 100%; left:80px; top: 90px; content: "";
  z-index:2;  opacity:1; position:fixed; pointer-events:none
}

<input type="range" id="range" value="100" min="0" max="100" step="1"  
oninput="updateVal(this.value)"
style="position:fixed; top:32px; left:8px">
<div id="rangevalue"></div>
<div class="page-header"></div> 

<div id='div1' style="position:fixed; top:70px; left:100px">
<canvas id='canvas' width='120' height='120'> </canvas> </div>

Answer 1

只需增加page-header的z-index即可。您的问题是，当不透明度降低时，您会创建一个新的stacking context，并且您的元素的painting order会发生变化：

＆＃13;

var rangeVal = document.getElementById('rangevalue');
var updateVal = function(val) {
  rangeVal.innerHTML = val;
};
updateVal(range.value);
var imgBlue = document.getElementsByClassName("page-header")[0];
range.addEventListener("input", function(value) {
    imgBlue.style.opacity = this.value / this.max;
});

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

＆＃13;

.page-header {
 position:relative;
 z-index:2;
}

.page-header:after {
  background-image: url(https://i.imgur.com/gkvp6Jn.jpg);
  height:100%; width: 100%; left:80px; top: 90px; content: "";
  z-index:2;  opacity:1; position:fixed; pointer-events:none
}

＆＃13;

<input type="range" id="range" value="100" min="0" max="100" step="1"  
oninput="updateVal(this.value)"
style="position:fixed; top:32px; left:8px;">
<div id="rangevalue"></div>
<div class="page-header"></div> 

<div id='div1' style="position:fixed; top:70px; left:100px">
<canvas id='canvas' width='120' height='120'> </canvas> </div>

＆＃13;

在这种情况下的解决方法是保持z顺序活着并降低不透明度？

1 个答案: