在導航欄上設置css的不透明度

我正在爲正在開發的遊戲製作網站。我剛剛開始工作，正在導航欄上工作。我希望徽標文本是純黑的，沒有不透明，但我希望背景塊具有不透明性。也是最有效的方法。我是HTML和Css的初學者。在導航欄上設置css的不透明度

這裏是CSS

.navbar{ 
    font-family:'Roboto', arial; 
    position: fixed; 
} 
.navbar #navbar-back{ 
    background: white; 
    opacity: .7; 
    border-bottom:solid; 
    border-bottom-width: 1px; 
    border-bottom-color:#A4A4A4; 
    width: 100%; 
    height: 55px; 
} 
.navbar #navbar-logo{ 
    font-size: 35px; 
    font-color: black; 
    opacity: 1; 
}

下面是HTML

<div class="navbar"> 
    <div class="navbar" id="navbar-logo"> 
     <p>Infinity</p> 
    </div> 
    <div class="navbar" id="navbar-back"> 
    </div> 
</div>

謝謝您的時間！

來源

2014-12-04 Colbeyyy

嗨@Colbeyyy，歡迎SO。 – Ben 2014-12-04 16:12:16

由於背景只是一種純色，因此將一個小而透明的PNG作爲背景圖像可能會更好。這樣你就不用擔心瀏覽器前綴/兼容性問題。 – APAD1 2014-12-04 16:13:01

謝謝你！這是一個很棒的社區！ – Colbeyyy 2014-12-04 16:13:32

一種解決方案是使用background: rgba(255, 255, 255, 0.7);，分給#navbar-logo更高z-index：這裏

.navbar { 
 
    font-family: 'Roboto', arial; 
 
    position: fixed; 
 
} 
 
.navbar #navbar-back { 
 
    background: rgba(255, 255, 255, 0.7); 
 
    border-bottom: solid; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: #A4A4A4; 
 
    width: 100%; 
 
    height: 55px; 
 
} 
 
.navbar #navbar-logo { 
 
    font-size: 35px; 
 
    color: black; 
 
    opacity: 1; 
 
    z-index: 2; 
 
}

<div class="navbar"> 
 
    <div class="navbar" id="navbar-logo"> 
 
    <p>Infinity</p> 
 
    </div> 
 
    <div class="navbar" id="navbar-back"></div> 
 
</div>

檢查的區別：

.navbar { 
 
    font-family: 'Roboto', arial; 
 
    position: fixed; 
 
} 
 
.navbar #navbar-back { 
 
    background: rgba(255, 255, 255, 0.7); 
 
    border-bottom: solid; 
 
    border-bottom-width: 1px; 
 
    border-bottom-color: #A4A4A4; 
 
    width: 100%; 
 
    height: 55px; 
 
} 
 
.navbar #navbar-logo { 
 
    font-size: 35px; 
 
    color: black; 
 
    opacity: 1; 
 
    z-index: 2; 
 
}

<div class="navbar"> 
 
    <div class="navbar" id="navbar-logo"> 
 
    <p>Infinity</p> 
 
    </div> 
 
    <div class="navbar" id="navbar-back"></div> 
 
    <div> 
 
    <p style="font-size: 18px;">test</p> 
 
    </div> 
 
</div>

來源

2014-12-04 16:20:43

爲背景的不透明度使用background-color: rgba(0,0,0,0.4)或作出不透明度PNG格式的1x1像素，並添加爲background: transparent url("image.png") left top repeat;

來源

2014-12-04 16:14:27

它不會影響你的文字不透明度，只有背景 – 2014-12-04 16:18:21

我還沒試過圖片雖然 – Colbeyyy 2014-12-04 16:21:12

設置background-color: rgba(255,255,255,0.7);爲#navbar-logo，因爲您使用純色背景。

來源

2014-12-04 16:16:02 saNs

#background{background-color:blue;height:300px;} 
 
#opacity{background-color:rgba(255,0,0,0.5);position:absolute;top:4%;left:20%;}

<div id="background">underneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneath 
 
    <div id="opacity"> 
 
    <h3>Hello</h3> 
 
    </div> 
 
underneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneathunderneath</div>

來源

2014-12-04 16:24:32 Billy

在導航欄上設置css的不透明度

回答

相關問題