我有一个全屏背景视频，我在其顶部添加了一个“变暗”div，以使用半透明的黑色全屏 div 使视频变暗。代码:
.dimmed:after {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .5);
}
HTML:
<div class="full_size dimmed">
<video autoplay loop poster="assets/images/home_page/polina.jpg" id="bgvid">
<!--<source src="polina.webm" type="video/webm">-->
<source src="assets/videos/polina.mp4" type="video/mp4">
</video>
<div class="not_dimmed">
<a href="http://www.w3schools.com" ><h5 id="app-name" class="nav-item clickable white-text medium-text left-text">{{APP_NAME}}</h5></a>
<a href="http://www.w3schools.com" ><h5 (click)="clicked()" id="sign-in-button" class="nav-item clickable brand-colour-text medium-text right-text with-border">{{REGISTER_TEXT}}</h5></a>
<a href="http://www.w3schools.com" ><h5 class="nav-item clickable white-text medium-text right-text">{{LOGIN_TEXT}}</h5></a>
<a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >{{BLOG_TEXT}}</h5></a>
</div>
</div>
我希望放置在视频背景顶部的 anchor 文本不会变暗。如您所见，我添加了一个 not_dimmed 类，并尝试在不调光的情况下覆盖调暗的样式。
但是它仍然变暗。我将如何“取消”文本？
所有的CSS:
.vertical-center {
height: 100%;
/*Fallback for vh unit
You might also want to use
'height' property instead.
Note that for percentage values of
'height' or 'min-height' properties,
the 'height' of the parent element
should be specified explicitly.
In this case the parent of '.vertical-center'
is the <body> element */
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9
we need to specify the width of the flex container */
width: 100%;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore.
Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
flex-wrap: wrap;
flex-direction: column;
}
/*large text on the home page*/
#motto-text {
height: calc(100% - 160px);
/*font-family: 'woodford_bourneregular', Arial, sans-serif;
font-weight: 100;*/
}
.white-text {
color: white;
}
.brand-colour-text {
color: #95F666;
}
.light-text {
font-weight: 100;
}
.medium-text {
font-weight: 300;
}
/*text on the left side of the page*/
.left-text {
margin: 60px 0px 0px 60px; float: left;
}
/*text on the right side of the page*/
.right-text {
margin: 60px 60px 0px 0px; float: right;
}
.italic-text {
font-style: italic;
}
.clickable {
cursor: pointer;
}
.with-border {
border: 1px solid #95F666;
border-radius:3px;
padding: 12px;
}
#sign-in-button {
margin-top: 48px;
}
.nav-item:hover {
color: #95F666;
}
#app-name:hover {
color: white;
}
#sign-in-button:hover{
background-color: #95F666;
color: dimgray;
}
@media only screen and (max-width: 500px) {
h3 {
font-size: 17px;
}
h4 {
font-size: 13px;
}
h1 {
font-size: 20px;
}
#app-name {
display: none;
}
right-text {
margin: 60px 30px 0px 30px;
}
}
.full_size {
height: 100%;
background-size: cover;
}
/*subtract the height of the footer to get an accurate vertical center*/
#home_page_background {
height: calc(100% - 60px);
background-repeat: no-repeat;
background-attachment: fixed;
}
@media only screen and (orientation: landscape) {
#home_page_background {
background-image: url("../assets/images/home_page/bg_ls_strawberry_dark.jpg");
}
}
@media only screen and (orientation: portrait) {
#home_page_background {
background-image: url("../assets/images/home_page/bg_p_strawberry_dark.jpg");
}
}
.dimmed:after {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .5);
}
.not_dimmed {
z-index: 11;
background: transparent;
}
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(../assets/images/home_page/polina.jpg) no-repeat;
background-size: cover;
}
/*for ie 9*/
video { display: block; }
@media screen and (max-device-width: 800px) {
html {
background: url(../assets/images/home_page/polina.jpg) #000 no-repeat center center fixed;
}
#bgvid {
display: none;
}
}
最佳答案
您可以将 :after-element 中的 background-color-dim 应用于 anchor 的容器。
关于html - 覆盖父 div 的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34969707/