使引導下拉透明

我需要讓引導下拉透明。這怎麼能實現。下面是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;
 
    }

能否請你幫忙嗎？

來源

2015-09-07 user4826347

你有什麼CSS？尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**。請參閱[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

我試過附加的CSS。謝謝 – user4826347

目前尚不清楚這部分應該是透明的，所以我會假設它是不按鈕而是上點擊出現的實際列表。

背景顏色由這個控制：

.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

來源

2015-09-07 20:01:43

它的按鈕，需要是透明的;對不起，我起初沒有說清楚 – user4826347

查看更新提示 –

完美。謝謝 – user4826347

試試這個方法嗎？

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

來源

2015-09-07 20:01:29

我與引導3.3.6經驗，利用它的變化較少的系統，您可以執行以下操作來控制色調和透明程度，在所有一杆...

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

來源

2016-03-12 15:20:19 blackhawk

使引導下拉透明

回答

相關問題