覆盖父div的css

我有一个全屏幕背景视频，我在顶部添加了一个“灰色”div，用半透明黑色全屏div来调暗视频。代码：覆盖父div的css

.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; 
    } 
}

来源

2016-01-23 BeniaminoBaggins

如果将'z-index：-1'添加到'.dimmed：after'后会发生什么？ – Aziz

请发布您的HTML示例中存在的类的CSS – LGSon

.not_dimmed {position; relative; z-index：100; } – magreenberg

你可以从你的应用背景，颜色暗淡：后元素锚容器而不是。

来源

2016-01-23 22:56:05 niorad

覆盖父div的css

回答

相关问题