CSS中的不透明度适用于子div

关于CSS中不透明属性的问题。我有一个标题头，我有一个不透明的.3应用于它（以及一个过渡，但这不是问题的关键）。这里是一个GIF：CSS中的不透明度适用于子div

现在，我喜欢的标题有，你可以很明显的看出其背后的图像效果，但我想标题本身出现白色，不透明度为1。由于的不透明度应用于其父div（标题），它看起来像div的其余部分一样褪色。有没有办法做到这一点？换句话说，有没有办法“覆盖”父元素的不透明度？

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#header { 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 0vh; 
 
    background-color: black; 
 
    opacity: 0; 
 
    z-index: 6; 
 
    transition: height 1s ease, opacity 1s ease; 
 
} 
 

 
#hoverable { 
 
    position: absolute; 
 
    height: 10vh; 
 
    width: 100%; 
 
    z-index: 7; 
 
} 
 

 
#hoverable:hover #header { 
 
    opacity: .3; 
 
    height: 10vh; 
 
} 
 

 
#title { 
 
    margin-left: 10vw; 
 
    line-height: 10vh; 
 
    float: left; 
 
}

<div id="hoverable"> 
 
    <div id="header"> 
 
    <div id="title"> 
 
     <h1>TITLE</h1> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-03-15 Paul

的[我不想继承的CSS父孩子不透明度]可能的复制（http://stackoverflow.com/questions/5770341/i-do-not-want-to-继承-的孩子，不透明度，来自该家长在-CSS） –

而是不透明的，你可以使用background-color: rgba(0,0,0,0);和background-color: rgba(0,0,0,.3);

RGBA代表红，绿，蓝，α。

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#header { 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 0vh; 
 
    background-color: rgba(0,0,0,0); 
 
    z-index: 6; 
 
    transition: height 1s ease, background 1s ease; 
 
} 
 

 
#hoverable { 
 
    position: absolute; 
 
    height: 10vh; 
 
    width: 100%; 
 
    z-index: 7; 
 
} 
 

 
#hoverable:hover #header { 
 
    background-color: rgba(0, 0,0,.3); 
 
    height: 10vh; 
 
} 
 

 
#title { 
 
    margin-left: 10vw; 
 
    line-height: 10vh; 
 
    float: left; 
 
}

<div id="hoverable"> 
 
    <div id="header"> 
 
    <div id="title"> 
 
     <h1>TITLE</h1> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-03-15 06:07:10

我看到你正在使用的ID为您的div的。也许你可以用类来代替。

CSS文件中的样式应该“级联”。因此，理论上，这应该允许稍后在样式表中声明的样式重写先前声明的样式。但是由于更具体的选择器（如ID），这不会像我们想要的那样频繁发生。

例如，如果您有以下HTML：

<div id="element" class="element"> 
<!-- stuff goes here... --> 
</div>

和CSS：

#element { 
background: blue; 
} 

body div.element { 
background: green; 
}

即使身体div.element选择的#element ID选择后出现，而且尽管事实上，“body”元素作为选择器的一部分被包含，元素的背景将是蓝色的 - 而不是绿色 - 因为ID选择器比第二个选择器更具体，并且自然级联已被覆盖。

https://www.impressivewebs.com/difference-class-id-css/

来源

2017-03-15 06:25:45 Armenak

CSS中的不透明度适用于子div

回答

相关问题