我开始使用 Codepen 是为了好玩,我想尝试一下这个名为“Croppie”的 JavaScript 代码(我是新手,仍在学习 JavaScript)。
我想将图像放在包含 JavaScript 的 div
之上。但是图片没有显示出来,而是隐藏在 div
后面。我还希望能够在 viewport
中移动图像,即使图像位于其上方。
我试过弄乱 z-index
,但我想要放在顶部的图像总是隐藏在 div
后面。 Here is the CodePen. (如果不在我的问题中添加任何代码,它不会让我发帖,所以这就是我在 CSS 中谈论的内容)。
.mask {
max-width: 100%;
max-height: 100%;
background-image: url('http://eprogramers.com/triangle.gif');
position: absolute;
z-index: 1;
}
#demo-basic {
width: 300px;
height: 300px;
margin: auto;
z-index: -1;
}
最佳答案
我将 mask
CSS 类的样式更改如下:
.mask{
width: 100%;
height: 100%;
background-image:url('http://eprogramers.com/triangle.gif');
background-repeat:no-repeat;
position:absolute;
z-index:99;
}
请检查以下代码片段:
//create a variable called basic, the variable attaches to div called demo-basic, which is an instance of croppie
var basic = $('#demo-basic').croppie({
//awknowledge the viewport
viewport: {
width: 150,
height: 200
}
});
//basic variable.croppie binds with url of cat
basic.croppie('bind', {
url: 'https://foliotek.github.io/Croppie/demo/cat.jpg',
points: [0,0,0,0]
});
body {
background-color: pink;
}
.mask{
width: 100%;
height: 100%;
background-image:url('http://eprogramers.com/triangle.gif');
background-repeat:no-repeat;
position:absolute;
z-index:99;
}
#demo-basic {
width: 300px;
height: 300px;
margin: auto;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.4.2"></script>
<script src="https://foliotek.github.io/Croppie/croppie.js"></script>
<link rel="Stylesheet" type="text/css" href="https://foliotek.github.io/Croppie/croppie.css" />
<div id='demo-basic'>
<div class="mask"></div>
</div>
关于javascript - 如何将图像放置在包含 JavaScript 的 div 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51433633/