2
我有一個全屏幕背景視頻，我在頂部添加了一個「灰色」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;
}
}
如果將'z-index：-1'添加到'.dimmed：after'後會發生什麼？ – Aziz
請發佈您的HTML示例中存在的類的CSS – LGSon
.not_dimmed {position; relative; z-index：100; } – magreenberg