Javascript 在html中，当一个分区和另一个分区都是不透明的时，我们如何将它们显示在另一个分区之上？
我不擅长设计网页。我有这个网页，我在codepen.io上制作的代码之一Javascript 在html中，当一个分区和另一个分区都是不透明的时，我们如何将它们显示在另一个分区之上？,javascript,jquery,html,css,responsive-design,Javascript,Jquery,Html,Css,Responsive Design,我不擅长设计网页。我有这个网页，我在codepen.io上制作的代码之一 .莫代尔{ 宽度：600px； 最大宽度：100%； 高度：400px； 最大高度：100%； } #词云{ 高度：100vh； 宽度：100vw； 保证金：0自动； } 身体， html{ 保证金：0； 填充：0； } .酒吧{ 边框：1px实心#666； 高度：5px； 宽度：100px； } .酒吧{ -webkit动画：填充10s线性1； 动画：填充10s线性1； 身高：100%； 背景颜色：绿色； } @-we
.莫代尔{
宽度：600px；
最大宽度：100%；
高度：400px；
最大高度：100%；
}
#词云{
高度：100vh；
宽度：100vw；
保证金：0自动；
}
身体，
html{
保证金：0；
填充：0；
}
.酒吧{
边框：1px实心#666；
高度：5px；
宽度：100px；
}
.酒吧{
-webkit动画：填充10s线性1；
动画：填充10s线性1；
身高：100%；
背景颜色：绿色；
}
@-webkit关键帧填充{
0% {
宽度：0%；
}
100% {
宽度：100%；
}
}
@关键帧填充{
0% {
宽度：0%；
}
100% {
宽度：100%；
}
}
$（窗口）.on（'load'，function（）{
$（'myModal'）.modal（'show'）；
});
进入
版权（
现在=新日期
theYear=now.getYear（）
如果（年份<1900年）
年份=年份+1900
文件。写入（年份）
/*=========================================================================*/
变量配置={
trace：是的，
分辨率：1，//更低=更好的分辨率
极限：360*5，
线宽：0.8，
xWordPadding:0，
女：3，
字体：“无衬线”
}
var words=[“words”，“are”，“cool”，“and”，“so”，“are”，“you”，“Great”，“funhouse！”，“apart”，“from”，“Ravi”，“fish”]。map（函数（word）{
返回{
字：字，
频率：Math.floor（Math.random（）*50）+10
}
})
words.sort（函数（a，b）{
返回-1*（a.freq-b.freq）；
});
var cloud=document.getElementById（“word cloud”）；
cloud.style.position=“相对”；
cloud.style.fontFamily=config.font；
var traceCanvas=document.createElement（“画布”）；
traceCanvas.width=cloud.offsetWidth；
traceCanvas.height=cloud.offsetHeight；
var traceCanvasCtx=traceCanvas.getContext（“2d”）；
云。追加子对象（traceCanvas）；
var起始点={
x:cloud.offsetWidth/2，
y:cloud.offsetHeight/2
};
var wordsDown=[]；
/*===========================================================================================================================*/
/*==================================================================================*/
函数createWordObject（字，频率）{
var wordContainer=document.createElement（“div”）；
wordContainer.style.position=“绝对”；
wordContainer.style.fontSize=freq+“px”；
wordContainer.style.lineHeight=config.lineHeight；
/*wordContainer.style.transform=“translateX（-50%）translateY（-50%）”*/
appendChild（document.createTextNode（word））；
返回wordContainer；
}
函数placeWord（word，x，y）{
cloud.appendChild（word）；
word.style.left=x-word.offsetWidth/2+“px”；
word.style.top=y-word.offsetHeight/2+“px”；
wordsDown.push（word.getBoundingClientRect（））；
}
函数跟踪（x，y）{
//traceCanvasCtx.lineTo（x，y）；
//traceCanvasCtx.stroke（）；
traceCanvasCtx.fillRect（x，y，1，1）；
}
函数螺旋（i，回调）{
角度=配置分辨率*i；
x=（1+角度）*数学cos（角度）；
y=（1+角度）*数学sin（角度）；
返回回调？回调（）：null；
}
函数相交（字、x、y）{
cloud.appendChild（word）；
word.style.left=x-word.offsetWidth/2+“px”；
word.style.top=y-word.offsetHeight/2+“px”；
var currentWord=word.getBoundingClientRect（）；
cloud.removeChild（word）；
对于（变量i=0；icomparisonWord.right+config.wXordPadding||
currentWord.bottom+config.yWordPaddingcomparisonWord.bottom+config.yWordPadding）{
返回true；
}
}
返回false；
}
/*==================================================================================*/
/*=====================================================================================*/
（函数placeWords（）{
对于（变量i=0；i <html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.modal {
width: 600px;
max-width: 100%;
height: 400px;
max-height: 100%;
}
#word-cloud {
height: 100vh;
width: 100vw;
margin: 0 auto;
}
body,
html {
margin: 0;
padding: 0;
}
.bar {
border: 1px solid #666;
height: 5px;
width: 100px;
}
.bar .in {
-webkit-animation: fill 10s linear 1;
animation: fill 10s linear 1;
height: 100%;
background-color: green;
}
@-webkit-keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
</head>
<div class="modal hide fade" id="myModal" role="dialog">
<div class="modal-header">
<img class="right" src="http://i.imgur.com/jfDhpP5.png" />
</div>
<div class="modal-body">
<h3>
<div id="word-cloud">
</div>
</h3>
</div>
<div class="modal-footer">
<div class="bar">
<div class="in"></div>
</div>
<div class="container center">
<button type="button" class="btn btn-default" data-dismiss="modal">Enter</button>
<div>
<span class="copyrights">Copyrights©
<script language="JavaScript" type="text/javascript">
now = new Date
theYear=now.getYear()
if (theYear < 1900)
theYear=theYear+1900
document.write(theYear)
</script>
<a href="http://yoururl.com">your company </a>
</span>
</div>
</div>
</div>
</div>
<script>
/* ======================= SETUP ======================= */
var config = {
trace: true,
spiralResolution: 1, //Lower = better resolution
spiralLimit: 360 * 5,
lineHeight: 0.8,
xWordPadding: 0,
yWordPadding: 3,
font: "sans-serif"
}
var words = ["words", "are", "cool", "and", "so", "are", "you", "Great", "funhouse!", "apart", "from", "Ravi", "fish"].map(function(word) {
return {
word: word,
freq: Math.floor(Math.random() * 50) + 10
}
})
words.sort(function(a, b) {
return -1 * (a.freq - b.freq);
});
var cloud = document.getElementById("word-cloud");
cloud.style.position = "relative";
cloud.style.fontFamily = config.font;
var traceCanvas = document.createElement("canvas");
traceCanvas.width = cloud.offsetWidth;
traceCanvas.height = cloud.offsetHeight;
var traceCanvasCtx = traceCanvas.getContext("2d");
cloud.appendChild(traceCanvas);
var startPoint = {
x: cloud.offsetWidth / 2,
y: cloud.offsetHeight / 2
};
var wordsDown = [];
/* ======================= END SETUP ======================= */
/* ======================= PLACEMENT FUNCTIONS ======================= */
function createWordObject(word, freq) {
var wordContainer = document.createElement("div");
wordContainer.style.position = "absolute";
wordContainer.style.fontSize = freq + "px";
wordContainer.style.lineHeight = config.lineHeight;
/* wordContainer.style.transform = "translateX(-50%) translateY(-50%)";*/
wordContainer.appendChild(document.createTextNode(word));
return wordContainer;
}
function placeWord(word, x, y) {
cloud.appendChild(word);
word.style.left = x - word.offsetWidth / 2 + "px";
word.style.top = y - word.offsetHeight / 2 + "px";
wordsDown.push(word.getBoundingClientRect());
}
function trace(x, y) {
// traceCanvasCtx.lineTo(x, y);
// traceCanvasCtx.stroke();
traceCanvasCtx.fillRect(x, y, 1, 1);
}
function spiral(i, callback) {
angle = config.spiralResolution * i;
x = (1 + angle) * Math.cos(angle);
y = (1 + angle) * Math.sin(angle);
return callback ? callback() : null;
}
function intersect(word, x, y) {
cloud.appendChild(word);
word.style.left = x - word.offsetWidth / 2 + "px";
word.style.top = y - word.offsetHeight / 2 + "px";
var currentWord = word.getBoundingClientRect();
cloud.removeChild(word);
for (var i = 0; i < wordsDown.length; i += 1) {
var comparisonWord = wordsDown[i];
if (!(currentWord.right + config.xWordPadding < comparisonWord.left - config.xWordPadding ||
currentWord.left - config.xWordPadding > comparisonWord.right + config.wXordPadding ||
currentWord.bottom + config.yWordPadding < comparisonWord.top - config.yWordPadding ||
currentWord.top - config.yWordPadding > comparisonWord.bottom + config.yWordPadding)) {
return true;
}
}
return false;
}
/* ======================= END PLACEMENT FUNCTIONS ======================= */
/* ======================= LETS GO! ======================= */
(function placeWords() {
for (var i = 0; i < words.length; i += 1) {
var word = createWordObject(words[i].word, words[i].freq);
for (var j = 0; j < config.spiralLimit; j++) {
//If the spiral function returns true, we've placed the word down and can break from the j loop
if (spiral(j, function() {
if (!intersect(word, startPoint.x + x, startPoint.y + y)) {
placeWord(word, startPoint.x + x, startPoint.y + y);
return true;
}
})) {
break;
}
}
}
})();
/* ======================= WHEW. THAT WAS FUN. We should do that again sometime ... ======================= */
/* ======================= Draw the placement spiral if trace lines is on ======================= */
(function traceSpiral() {
traceCanvasCtx.beginPath();
if (config.trace) {
var frame = 1;
function animate() {
spiral(frame, function() {
trace(startPoint.x + x, startPoint.y + y);
});
frame += 1;
if (frame < config.spiralLimit) {
window.requestAnimationFrame(animate);
}
}
animate();
}
})();
</script>
</html>
#word-cloud {
position:fixed;
height: 100vh;
max-height: 100%;
width: 100vw;
max-width: 100%;
margin:-300px auto auto -250px;
top:20%;
left:22%;
text-align:center;
z-index:2;
}
img{
position:relative;
left:40%;
margin-left:0px;
}
body,
html {
margin: 0;
padding: 0;
}
.bar .in {
-webkit-animation: fill 10s linear 1;
animation: fill 10s linear 1;
height: 100%;
background-color: red;
}
@-webkit-keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}