无法看到在任何块元素

所以画布，我有一个JS画布产生我的BG和导航栏结束了，但问题是，我把任何对话框出现在背景上。我希望即使在导航下也能随时看到圈子。简单的英语 - 我想让所有的盒子背景透明。我希望问题很清楚。

代码：

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标题：

#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; 或/和filter：alpha（opacity = 0）;结果是...盒子元素是白色不透明的。

Snippet

来源

2016-12-19 Austris Otersons-Andersons

可能重复[如何使背景DIV只透明使用CSS]（http://stackoverflow.com/questions/7565384/how-to-make-the -background-div-only-transparent-using-css） –

你可能想给我们看一个工作片断，因为这个CSS对我来说似乎很好。 – Randy

@Randy添加了一个片段！ –

-1

也许尝试沿着filter: alpha(opacity = 0);在#mainNav线的东西，取下background-color: rgba(255, 0, 0, 0.0);可能？我不确定，没有时间来测试它，但这是我的猜测。

来源

2016-12-19 21:04:58 Alex

哇这个语法是不是有些<= IE8唯一奇怪的功能？这已经很长时间了:-)感谢怀旧。但OP说他只使用HTML5浏览器支持的画布。所以不透明性：值应该做，但也会使文本透明和任何方式只是不设置div的背景也应该做，或者如果他不能清理它的CSS background-color：transparent。 – Kaiido

@Alex检查更新，没有结果... –

我得到了解决方案。首先我把主元素移出mainWrap，所以他们来到Canvas之后。然后，我设置元素的位置以绝对放置它们。后rgba工作正常，使背景透明:)

来源

2016-12-20 17:07:32

无法看到在任何块元素

回答

相关问题