独立元素的背景不透明度从它的内容不透明

我想获得这样的： 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 –

独立元素的背景不透明度从它的内容不透明

回答

相关问题