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应用到锚点的容器中。

覆盖父div的css

1 个答案: