覆盖父div的css

Question

我有一个全屏背景视频，我在其顶部添加了一个“变暗”的 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;
    }
}

Answer 1

您可以将 :after-element 中的 background-color-dim 应用到锚的容器中。