使Bootstrap下拉菜单透明化

Question

我需要使Bootstrap的下拉菜单透明。如何实现这一点？以下是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

     .transparentbar {
        background-repeat:不重复;
        cursor:指针;
        outline:无;
        border:无;
        box-shadow:无; 
        background-image: 无;

        background-color: 透明;
        background: 透明;
        border-color: 透明;

    }

你需要帮忙吗？

- user4826347

---

你有什么CSS？寻求代码帮助的问题必须在问题本身中包含复制所需的最短代码。请参阅《如何创建最小、完整和可验证的示例》。 - Paulie_D

我尝试过的CSS已经附在下面了。谢谢。 - user4826347

Answer 1

这段话的意思是不清楚哪一部分应该是透明的，因此我假设它并不是按钮，而是实际在点击时出现的列表。

背景颜色由以下代码控制：

.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);
}

因此，我建议在选择器中更加具体，以避免影响其他下拉菜单。

#mydiv > .dropdown-menu {
    background:transparent;
}

编辑：该按钮由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>

Bootply Demo

- Paulie_D

---

这是需要透明的按钮；抱歉我一开始没有表达清楚。 - user4826347

Answer 2

我的Bootstrap 3.3.6使用经验及其LESS变量系统，您可以通过以下方式一次性控制颜色色调和透明度级别...

@dropdown-bg:rgba(248,248,248,.90);

- klewis

Answer 3

尝试一下这种方式？

<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>

- Praveen Kumar Purushothaman