Wie png img über den Videohintergrund einstellen?

Ich möchte ein Png über mein Hintergrundvideo setzen, aber das Png ist dahinter.Wie png img über den Videohintergrund einstellen?

Ich habe versucht, mit Z-Index, aber dann verschwindet das Video (wenn ich die Position von relativ zu absolut oder fest). Hier ist meine HMTL und CSS-Code:

<div id="page2"> 
    <video autoplay loop muted id="video"> 
     <source src="Images/KeyboardVideo.mp4"> 
     <source src="Images/KeyboardVideo.webm"> 
    </video> 

    <div id="servicelogo"><img src="images/htmlcssjs.png"></div> 
</div> 




/* CSS Document */ 

* {margin: 0; padding: 0;} 

     body{ 
      font-family: arial,helvetica; 
      color: black; 
      text-align: center; 
     } 

     h1{ 
      font-size: 6em; 
      padding-top: 305px; 
      opacity: 0.8; 
     } 

     p{ 
      font-size: 2em; 
     } 


#wrapper { 
    position: fixed; 
    height: 80px; 
    width: 100%; 
    background-color: black; 
    z-index: 500; 
} 

#nav { 
    height: 80px; 
    width: auto; 
    float: right; 
    list-style: none; 
    position: relative; 
    margin-right: 100px; 
    z-index: 500; 
} 

#nav li { 
    height: 80px; 
    width: 100px; 
    float: left; 
    font-family: sans-serif; 
    font-weight: bold; 
    color: white; 
    padding: 0px 15px 0px 15px; 
    text-align: center; 
    line-height: 80px; 
    font-size: 20px; 
} 

#video { 
position: relative; 
width: auto; 
min-width: 100%; 
height: auto; 
background: transparent url(images/Nature2.jpg) no-repeat; 
background-size: cover; 
z-index: -1 
} 

#servicelogo img{ 
    position: relative; 
    height: 40%; 
    width: 40%; 
    margin-top: 8%; 
    opacity: 0.8; 
} 

#page2 { 
    width: 100%; 
    max-height: 100%; 
    overflow: hidden; 
    top: 0; 
    right: 0;  
} 

a {text-decoration: none;} 

/* unvisited link */ 
a:link { 
    color: white; 
} 

/* selected link */ 
a:active { 
    color: #7f8c8d; 
} 

/* visited link */ 
a:visited { 
    color: white; 
} 

/* mouse over link */ 
a:hover { 
    color: #7f8c8d; 
} 


#page1 {background-image: url(images/Nature1.jpg); z-index: -1;} 
#page3 {background-image: url(images/Nature2.jpg);} 
#page4 {background-color: #2ecc71;}

Quelle

2016-06-18 Dean Zuna

Verwendung Plakat Attribute Video statt. z.B. '

Dies ist eine nette Option, aber ich brauche mein Bild, um immer über das Video zu sein. Hier ist meine Webseite - www.deanzuna.com (es ist unter Bau), und wenn Sie auf den Link "Dienste" gehen, werden Sie das Video sehen. Ich habe einen Plan, ein nettes Video über dieses Video zu machen, das ständig an seinem Platz bleibt. –

Ich habe es gelöst! :) #video { Position: fixiert; oben: 50%; links: 50%; minimale Breite: 100%; min-Höhe: 100%; Breite: Auto; Höhe: Auto; Z-Index: -100; transform: translate (-50%, -50%); } #servicelogo img { \t Position: relativ; \t Höhe: 40%; \t Breite: 40%; \t Rand oben: 8%; \t Opazität: 0,8; } # page2 { Breite: 100%; maximale Höhe: 100%; Überlauf: versteckt; oben: 0; rechts: 0; } –

Sie diesen snipet folgen:

.videoitem { 
 
    position: relative; 
 
    overflow: hidden; 
 
    
 
    width: 560px; 
 
    height: 315px; 
 
} 
 

 
.videoitem-cover { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    /*** opacity: 0; ***/ 
 
    background: yellow; 
 
    transition: 250ms opacity ease-out; 
 
    line-height: 315px; 
 
    text-align: center; 
 
    -webkit-pointer-events: none; 
 
    pointer-events: none; 
 
} 
 

 
.videoitem:hover .videoitem-cover { 
 
    opacity: 1; 
 
}

<div class="videoitem"> 
 
    <div class="videoitem-embedd"><iframe width="560" height="315" src="https://www.youtube.com/embed/zdkWGsnzTXk" frameborder="0" allowfullscreen></iframe></div> 
 
    <div class="videoitem-cover">Hovering</div> 
 
</div>

Quelle

2016-06-18 10:38:27 Hitmands

Das ist interessant, aber ich will das PNG über das Hintergrundvideo die ganze Zeit und nicht nur, wenn ich darüber schweben. –

Besuchen Sie meine Webseite (sie befindet sich noch im Aufbau) - www.deanzuna.com und klicken Sie auf SERVICES. Es bringt Sie zum Hintergrundvideo. Ich plane, einen img, der zentriert ist, und bleibt über das Video die ganze Zeit. –

In meinem Beispiel muss man bei der css-Regel bezüglich '.videoitem-cover' die Regel 'opacity: 0' abschneiden und die Ebene bleibt immer auf dem Video ... – Hitmands

ich es gelöst! Früher habe ich den folgenden CSS-Code:

#video { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#servicelogo img{ 
 
\t position: relative; 
 
\t height: 40%; 
 
\t width: 40%; 
 
\t margin-top: 8%; 
 
\t opacity: 0.8; 
 
} 
 

 
#page2 { 
 
    width: 100%; 
 
    max-height: 100%; 
 
    overflow: hidden; 
 
    top: 0; 
 
    right: 0;  
 
}

Quelle

2016-06-18 12:26:25

Wie png img über den Videohintergrund einstellen?

Antwort

Verwandte Themen