twitter-bootstrap 使引导下拉菜单透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32445171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making bootstrap dropdown transparent
提问by user4826347
I need to get the bootstrap dropdown transparent. How can this be achieved. Below is the html
我需要使引导程序下拉菜单透明。这怎么可能实现。下面是html
<div id="mydiv" class="dropdown transparentbar" style="z-index:4">
<button class="btn btn-default dropdown-toggle" type="button" id="mybyn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Drop mat
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
CSS
CSS
.transparentbar {
background-repeat:no-repeat;
cursor:pointer;
outline:none;
border:none;
box-shadow:none;
background-image: none;
background-color: transparent;
background: transparent;
border-color: transparent;
}
你能帮忙吗？回答by Paulie_D
It's not clear whichpart is supposed to be transparent so I'm going to assume it's notthe button but rather the actual list that appears on click.
不清楚哪个部分应该是透明的，所以我假设它不是按钮，而是点击时出现的实际列表。
The background color is controlled by this:
背景颜色由以下控制：
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff; /* here */
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
So I would recommend being slightly more specific in the selector to avoid affecting any other dropdowns
所以我建议在选择器中稍微具体一些，以避免影响任何其他下拉菜单
#mydiv > .dropdown-menu {
background:transparent;
}
EDIT: The button is controlled by the btn-defaultclass
编辑：按钮由btn-default类控制
#mydiv > btn-default {
background:transparent;
}
/* CSS used here will be applied after bootstrap.css */
body {
background:pink !important;
}
#mydiv > .btn-default {
background:transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<div id="mydiv" class="dropdown transparentbar" style="z-index:4">
<button class="btn btn-default dropdown-toggle" type="button" id="mybyn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Drop mat
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>回答by Praveen Kumar Purushothaman
Have a try this way?
试试这个方法？
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<style>
body {background-color: #999;}
.dropdown-menu {background-color: transparent;}
</style>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>回答by klewis
My experience with Bootstrap 3.3.6 and using it's LESS variable system, You can do the following to control the color hue,and level of transparency, all in one shot...
我使用 Bootstrap 3.3.6 和使用它的 LESS 变量系统的经验，您可以执行以下操作来控制色调和透明度级别，所有这些都一次性完成...
@dropdown-bg:rgba(248,248,248,.90);
