Question

所以我是网络开发（以及JS和Jquery）的新手，我有一个我无法找到的问题。我创建了一个页脚，以便我可以链接到您要下载游戏的平台。我遇到了障碍 - 我的页脚的<div>元素是白色的，但我希望它是透明的。

这是我的代码：

CSS：

body {
    background: url(images/background.jpg);
    background-repeat: no-repeat;
    background-size: 1280px 913px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display:inline;
}

.footer
{
margin-top: 752px;
margin-left: 110.00000001px;
padding:0;
background-color:none;
}

.links
{
margin: 24px;
padding: -40px;
border: 0;
}

/*inline = horizontal nav menu; block = vertical nav bar*/

HTML：

<!DOCTYPE html> 

<html>

<head>
<title>Sonic the Hedgehog 4: Episode 1</title> 
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0" />
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="CSS/page1.css"> 
</head>

<body> 

<audio autoplay>
<source src="music/splashhillzone.mp3" type="audio/mp3">
</audio>


<div class="container-fluid">
<li><a href="page1.html">Home</a></li>
<li><a href="page2.html">Story</a></li>
<li><a href="page3.html">Zones</a></li>
<li><a href="page4.html">Badniks</a></li> 
<li><a href="page5.html">Media</a></li>
</ul> 
</div> 

<div class="footer">
<div class="panel-footer">
<a target="_blank" class="links" href="https://www.nintendo.com/games/detail/HzlsX88COYTMDJaVQYE3M9Yww89OErL5" style="text-align:center"><img src="CSS/images/wiiware.png" width="160" height="120"></a>

<a target="_blank" class="links" href="https://play.google.com/store/apps/details?id=com.sega.sonic4epi" style="text-align:center"><img src="CSS/images/googleplay.png" width="160" height="120"></a>

<a target="_blank" class="links" href="http://store.steampowered.com/app/202530/"><img src="CSS/images/steam.png" width="160" height="120" style="text-align:center"></a>

<a target="_blank" class="links" href="http://marketplace.xbox.com/en-US/Product/SONIC-4-Episode-I/66acd000-77fe-1000-9115-d80258410a07" style="text-align:center"><img src="CSS/images/xbox.jpg" width="160" height="120"></a> 
</div>
</div>


</body>

</html>

由于我想练习JS和Jquery，我最好用两种语言中的任何一种来回答。

我手头搜索但我无法找到答案。

编辑：这是我的页面。注意：我没有调整我的页面以查看全屏（F11），因此请忽略它。

http://i.imgur.com/5L7XLTW.png

Answer 1

简单的CSS：

background-color: transparent;

将来，在发布Web开发问题时，预计会使用"code pen"类似的网站，该网站可以轻松实现可视化并创建小的可行示例，其中CSS, HTML and javascript都是自包含的。

希望这能回答你的问题。

Answer 2

由于您想要使背景颜色透明，您需要将以下CSS规则添加到.footer类：

background-color: transparent;

这会使背景透明

Answer 3

试试这个..为我工作。

.footer {
background-color: transparent;
}

Answer 4

您是否尝试使用具有完全不透明度的rgb设置背景颜色？

background-color:rgb(255,0,0,0)

Answer 5

您的代码存在一些轻微错误：

1.您需要在<ul>中添加一个开放的<div class="container-fluid">标记，如下所述：

<div class="container-fluid">
  <ul>
    <li><a href="page1.html">Home</a>
    </li>
    <li><a href="page2.html">Story</a>
    </li>
    <li><a href="page3.html">Zones</a>
    </li>
    <li><a href="page4.html">Badniks</a>
    </li>
    <li><a href="page5.html">Media</a>
    </li>
  </ul>
</div>

其次，为了让footer类透明化的目标，请将此代码片段添加到CSS中：

.footer {
  margin-top: 752px;
  margin-left: 110.00000001px;
  padding: 0;
  background-color: transparent;
}

您还可以在以下位置查看您的代码：https://plnkr.co/edit/gG8HbutEKkWbpAWSW3nC

希望这有帮助！

Answer 6

如果您使用浏览器的DOM检查工具，您会看到Bootstrap CSS包含background-color: #f5f5f5;类的panel-footer。

因此，解决方案是在您自己的CSS中设置background-color: transparent。

其他答案也有这个，但是他们都忽略了提到你需要应用它的panel-footer类，而不是footer类。

.panel-footer {
  background-color: transparent;
}

<div>元素页脚白色背景

6 个答案: