所以，我有一个生成 BG 的 JS Canvas 和一个导航栏，但问题是我放置的任何框都出现在背景上。 我希望这些圆圈始终可见，即使在导航下也是如此。 用简单的英语 - 我想让所有的盒子背景透明。 我希望问题足够清楚。
代码:
HTML:
<html>
<head>
<meta charset="utf-8">
<title>Sky</title>
<!-- Styles -->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/header.css" rel="stylesheet" type="text/css"/>
<link href="css/content.css" rel="stylesheet" type="text/css"/>
<link href="css/footer.css" rel="stylesheet" type="text/css"/>
<!-- P5 Libraries -->
<script language="javascript" type="text/javascript" src="libs/p5.js"></script>
<script language="javascript" src="libs/p5.dom.js"></script>
<!-- Sky BG -->
<script language="javascript" type="text/javascript" src="js/sketch.js"></script>
<script language="javascript" type="text/javascript" src="js/star.js"></script>
</head>
<body>
<div id="mainWrap">
<header>
<div id="logoDiv">
</div>
<nav id="mainNav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">HELP</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
CSS:
html, body, #mainWrap {
height:100%;
width:100%;
margin:0px;
}
body{
color: rgba(255,255,255,0.9);
background-color: #222222;
}
a {
text-decoration: none;
color: rgba(255,255,255,0.3);
}
ul {
list-style-type:none;
}
CSS header :
#mainNav ul, #mainNav ul li {
margin: 0px;
padding: 0px;
}
#mainNav{
text-align: center;
width: 100%;
height: 40px;
margin: 30px auto;
background-color: rgba(255, 0, 0, 0.0);
}
#mainNav ul li{
display: inline-block;
width: 20%;
height: 100%;
text-align: center;
}
#mainNav ul li a {
display: inline-block;
vertical-align: middle;
transition: 0.5s ease-in-out;
width: 100%;
height:40px;
padding: 20px 0;
}
#mainNav ul li a:hover {
color: rgba(255,255,255,0.9);
background-color: rgba(255,255,255,0.3);
}
#logoDiv {
width: 100%;
height: 100px;
opacity: 0;
}
相关js:
function setup() {
//full screen setup
canvas = createCanvas(window.innerWidth*1.4,window.innerHeight*1.4);
canStyle = canvas.style;
canvas.elt.style.position = "fixed";
mainWrap = document.getElementById('mainWrap');
canvas.parent(mainWrap);
不透明度:0； 或/和过滤器:alpha(opacity = 0);结果是……盒子元素是白色的而不是透明的。
最佳答案
我得到了解决方案。 首先，我将元素从 mainWrap 中移出，因此它们位于 Canvas 之后。 然后我将元素的位置设置为绝对并放置它们。 在 rgba 使背景透明后效果很好:)
关于javascript - 在任何 block 元素下都看不到 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41230561/