獨立元素的背景不透明度從它的內容不透明

我想獲得這樣的： The Target & How it looks like 的事情是，我的代碼是這樣的：獨立元素的背景不透明度從它的內容不透明

HTML

<body> 
    <header> 
     <nav> 
      <h1>whiterose</h1> 
      <ul> 
       <li><a href="">home</a></li> 
       <li><a href="">us</a></li> 
       <li><a href="">contact</a></li> 
      </ul> 
     </nav> 
    </header>

CSS：

header { 
    background: #5d5e62; 
    color: #ffffff; 
    font-size: 110%; 
    height: 7vh; 
    width: 100%; 
    opacity: 0.7; 
    position: fixed; 
    overflow: auto; 
} 
header h1 { 
    margin-left: 5%; 
    padding: 0.5% 0; 
    letter-spacing: -2px; 
    display: inline; 
} 
header nav { 
    display: inline; 
    overflow: auto; 
} 
header nav ul { 
    display: inline; 
    margin-left: 55%; 
} 
header nav ul li{ 
    list-style-type: none; 
    color: #ffffff; 
    padding: 0 0.3%; 
    display: inline; 
} 
header nav ul li a { 
    text-decoration: none; 
    color: #ffffff; 
    font-weight: bold; 
    font-size: 200%; 
}

那麼爲什麼即使我將父元素添加到父項元素（標題）他們仍然應用不透明屬性？

來源

2017-04-09 Esteban

你希望你的文字爲0.7不透明度。那是對的嗎？ –

根據目標圖像，文字處於完全不透明狀態且背景爲不透明0.7 – anurupr

我希望標題具有不透明度，例如「0.7」但文字仍然不透明1.0。 – Esteban

你需要給不透明度爲標題的背景，而不是它的內容：

header { 
    background: rgba(0,0,0,0.7); 
}

檢查片斷演示：

div { 
 
    position: absolute; 
 
    top: 0px; 
 
    background: rgba(255,0,0,0.5); 
 
    width: 300px; 
 
    height: 150px; 
 
    font-size: 50px; 
 
    color: white; 
 
}

<img src="http://lorempixel.com/400/200/" /> 
 
<div>Your Text Goes Here</div>

來源

2017-04-09 07:07:18

對不起，先生，但它仍然，我只是希望背景具有透明度（不透明度），但內部文本（即使我將其賦予不透明屬性：初始值），靜止圖像會從背景中繼承不透明度，就像背景是文字而不是倒退一樣！ – Esteban

@Esteban檢查演示...它的工作原理就像你問的那樣......紅色的div有一個半透明的背景和一個純色的文字顏色。 –

@Esteban查看更新的答案（附演示） –

你會需要使用background-color屬性的rgba值。我已經用這個創建了一個jsfiddle。

jsfiddle

你可以玩的不透明度值，以滿足您的需求

來源

2017-04-09 07:07:25 anurupr

如果你把父元素的透明度，它的子元素將自動獲得同樣的不透明度。如果你試圖聰明並定義子元素的不透明性，相信我不會工作。

所以，這裏的解決方案非常簡單。你希望你的標題顏色爲＃5d5e62，不透明度爲0.7。就在RGB轉換這個十六進制值，並定義背景色

background: rgba(93,94,98,0.7);

這樣，所有的子元素將不透明度1，而背景顏色將是不透明0.7。

我希望這會解決您的問題。

來源

2017-04-09 07:21:48

Thaks Vineet但它不起作用，我試圖把h1從標題中取出，它仍然是，「不透明」屬性似乎是「無所不能」。 – Esteban

header { background：rgba（93,94,98,0.7）; color：#ffffff; font-size：110％; 身高：7vh; 寬度：100％; 職位：固定; 溢出：auto; }通過這個改變頭部CSS –

獨立元素的背景不透明度從它的內容不透明

回答

相關問題