使引导下拉透明

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:no-repeat;
        cursor:pointer;
        outline:none;
        border:none;
        box-shadow:none; 
        background-image: none;

        background-color: transparent;
        background: transparent;
        border-color: transparent;

    }

你能帮忙吗？

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