我有
.grid-texture {
background-size: 4px 4px;
background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
position: relative;
z-index: 1;
min-height: 100vh;
}
.btn {
position: absolute;
left: 50%;
top: 50%;
}<div class="grid-texture"></div>
<div class="btn">
<button class="btn">Button</button>
</div>我得到了這個：
因此，按鈕變得無法使用。
現在的問題是：我如何制作它以便我可以通過網格紋理按下按鈕？
或者
如何在所有 html 元素之上“疊加”網格紋理，同時保持 buttonsa 等的功能？
uj5u.com熱心網友回復：
添加pointer-events: none;到grid-texture
.grid-texture {
background-size: 4px 4px;
background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
position: relative;
z-index: 1;
min-height: 100vh;
pointer-events: none;
}
.btn {
position: absolute;
left: 50%;
top: 50%;
}<div class="grid-texture"></div>
<div class="btn">
<button class="btn">Button</button>
</div>uj5u.com熱心網友回復：
只需添加 z-index & background-color:transparent; 按鈕CSS。
.grid-texture {
background-size: 4px 4px;
background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
position: relative;
z-index: 1;
min-height: 100vh;
}
.btn {
position: absolute;
left: 50%;
top: 50%;
z-index:9;
background-color:transparent;
}<div class="grid-texture"></div>
<div class="btn">
<button class="btn">Button</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353056.html