我在访问具有"不规则"边框设计的div 内部元素时遇到问题。
我的要求是在div的顶部有一个有2个可点击元素的边框。div 本身有一个画布来绘制任何东西。
问题是,如果我需要使边框可见,那么我必须使div 的 z 索引更低,这将不再允许在画布中绘制。如果我使div 的 z 索引更高,那么边框元素就会被切断。
我尝试过边框图像,但它 (1( 它使角呈方形,(2( 它不会使 2 个项目可点击。所以,我有一个包含边框和 2 个可点击元素的 SVG。
(function() {
const canvas = document.getElementById('signature-pad');
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext('2d').scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'red' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
});
})();
.container {
height: 500px;
width: 409px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
img {
position: absolute;
top: 0;
height: 100%;
z-index: 1;
}
.container::before {
display: block;
content: " ";
position: absolute;
width: calc(100% - 3rem);
height: calc(100% - 2rem);
background-color: red;
z-index: -1;
}
canvas {
width: calc(100% - 3rem);
height: calc(100% - 2rem);
z-index: 1;
}
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<div class="container">
<img src="https://i.imgur.com/yWMwxJQ.png">
<canvas id="signature-pad" class="signature-pad" height="500px;" width="409px;"></canvas>
</div>
JSFiddle
只需首先设置您的 (更高的 z-index(及其pointer-events
CSS 规则即可none
,这样,指针事件将穿过它并到达您的画布:
(function() {
const canvas = document.getElementById('signature-pad');
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext('2d').scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'red' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
});
})();
.container {
height: 500px;
width: 409px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
img {
position: absolute;
top: 0;
height: 100%;
z-index: 1;
/* disable all pointer-events so we can reach underneath layer */
pointer-events: none;
}
.container::before {
display: block;
content: " ";
position: absolute;
width: calc(100% - 3rem);
height: calc(100% - 2rem);
background-color: red;
z-index: -1;
}
canvas {
width: calc(100% - 3rem);
height: calc(100% - 2rem);
z-index: 1;
}
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<div class="container">
<canvas id="signature-pad" class="signature-pad" height="500px;" width="409px;"></canvas>
<!-- make <img> on top -->
<img src="https://i.imgur.com/yWMwxJQ.png">
</div>
使用 ::before
伪元素,您可以使用z-index: -1
在 .container
内部创建一个块
应用background-image
(或使用<img>
前景,我选择了背景(来.item
。
.container {
height: 500px;
width: 409px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.container::before {
display: block;
content: " ";
position: absolute;
width: calc(100% - 3rem);
height: calc(100% - 2rem);
background-color: red;
z-index: -1;
}
.item {
background-size: contain;
background-repeat: no-repeat;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="item" style="background-image:url('https://i.imgur.com/yWMwxJQ.png')">
<div><button onclick="alert(1)">Hello</button></div>
</div>
</div>