不透明度不起作用

我想爲我的網站上的三個按鈕添加不透明度。我的確有工作，但因爲我按鈕中的文字也受到了影響，所以我嘗試在它周圍創建一個跨度，並且自從我開始弄亂它以來，我無法再獲得不透明度。不透明度不起作用

有沒有人看到我做錯了什麼？我試圖添加不透明度的部分是這個div ...

<div class="search_option_container_out"> 
    <div class="search_option_box"> 
     <ul> 
      <li>Homes</li><!-- 
      --><li>Agents</li><!-- 
      --><li>fdfs</li> 
     </ul> 
    </div> 
</div>

這裏是一個小提示，顯示按鈕的功能。這些按鈕是三個深灰色按鈕。

https://jsfiddle.net/zoue6gv7/

來源

2015-10-16 Becky

您確實添加了不透明度，按鈕是灰色的，而不是黑色。

如果添加

body { 
    background-color: #009; 
}

你可以看到按鈕是半透明的。

如果你只是想改變背景顏色，而不是所有的孩子，你可以使用background-color: rgb(24, 24, 24, 0.6)代替opacity: 0.6：

更改此：

.search_option_box li { 
    display: inline; 
    border: 1px solid black; 
    border-collapse: collapse; 
    line-height: 2em; 
    padding: 20px 75px; 
    background: rgb(24, 24, 24); 
    opacity: 0.6; 
    color: #FFFFFF; 
}

要這樣：

.search_option_box li { 
    display: inline; 
    border: 1px solid black; 
    border-collapse: collapse; 
    line-height: 2em; 
    padding: 20px 75px; 
    background: rgba(24, 24, 24, 0.6); 
    color: #FFFFFF; 
}

來源

2015-10-16 19:47:02 ratherblue

這是因爲按鈕的顏色不是黑色。我將它製成深灰色。在我對他們做某事之前，他們看起來很透明。 – Becky

按鈕幾乎是黑色的，rgba（24,24,24）幾乎全黑。他們看起來更輕，因爲你有不透明度：0.6' – ratherblue

哦，我明白了。白色的背景必須把我扔掉。謝謝！ – Becky

更改爲

.search_option_box li { 
    display: inline; 
    border: 1px solid black; 
    border-collapse: collapse; 
    line-height: 2em; 
    padding: 20px 75px; 
    background: rgba(24, 24, 24, 0.6); 
    color: #FFFFFF; 
}

所以背景獲得不透明度

來源

2015-10-16 19:48:22 Jesse

使用rgba將會很有用，並且不會影響文字。

.search_option_box li { 
display: inline; 
border: 1px solid black; 
border-collapse: collapse; 
line-height: 2em; 
padding: 20px 75px; 
/*background: rgb(24, 24, 24); */ 

background: rgba(24, 24, 24, 0.32); 
/* opacity: 0.6; */ 
color: #FFFFFF; 
}

來源

2015-10-16 19:48:57 CodeRomeos

不透明度不起作用

回答

相關問題