2016-03-29 15 views
0

Auf dieser Seite habe ich einige meiner Elemente unter dem Video-Set, um nach 15s mit CSS einzublenden.Wie ändert man das CSS des Hintergrundelements?

Das Problem ist, dass bis zum Einblenden der Elemente der Hintergrund unter dem Video Grau ist.

Wie kann ich den GRAUEN Hintergrund in Weiß (oder # F3F8FC wirklich) ändern, bis meine Elemente fertig sind verblassen? Ich kann nicht den richtigen CSS-Selektor finden, um es zu ändern. Hier ist die CSS Ich verwende - Notwendigkeit, herauszufinden, wie die Farbe zu ändern, was hinter den Elementen versteckt:

/* make keyframes that tell the start state and the end state of our object */ 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

.enroll { 
    opacity:0; /* make things invisible upon start */ 
    -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ 
    -moz-animation:fadeIn ease-in 1; 
    animation:fadeIn ease-in 1; 

    -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    animation-duration:1s; 
} 

.enroll { 
-webkit-animation-delay: 15s; 
-moz-animation-delay: 15s; 
animation-delay: 15s; 
} 

How to Change GREY to white

Beifall.

+0

Bitte verlinken Sie nicht auf beliebige Seiten im Internet. Fügen Sie der Frage Ihre Markup- und Styling-Regeln hinzu und, noch besser, fügen Sie ein Jsfiddle hinzu, damit andere mit Ihrem Code herumspielen können. Vielen Dank. – arkascha

+0

Übergang hinzufügen: alles Eigentum. https://css-tricks.com/almanac/properties/t/transition/ –

+0

@SameeraLiyanage danke. Scheint, dass das CSS, das ich verwende, ein bisschen anders ist als das, auf das Sie verwiesen haben. Wie würde ich das auf die CSS anwenden, die ich benutze (oben hinzugefügt) Ich bin ein CSS-Anfänger. Prost! – user2541522

Antwort

1

Javascript Lösung Javascript

Sie können anstelle von CSS verwenden.

function fadeIn(){ 
//code to fadeIn... 
} 

Und in HTML fügen Sie auf Element

<div id="bg" onload="setTimeout('fadeIn()', 15000)"></div> 

CSS-Lösung

Sie background:(here goes attributes, for example color); verwenden können.
Hier Beispiel:
background:white;

Try this:
@keyframes fadeIn { from { opacity:0;background:(color-1); } to { opacity:1;background:(color-2); } }

+0

Ich benutze einen Seitengenerator und das ist ein bisschen über meine Fähigkeit, aber danke. – user2541522

+0

@ user2541522 überprüfen sie die lösung jetzt, ich habe sie aktualisiert – Kacper

+0

hat es zur arbeit mit: "body.custom-background" Vielen Dank für Ihre Hilfe! – user2541522

0

die bg zu entfernen, Sie, wie dies für das col-3cm Layout zum Beispiel tun würden:

.col-3cm .main, 
.col-3cm .main-inner 
{ 
background: none; 
} 
+0

Danke. Versucht, diesen Code hinzuzufügen, aber es hat nicht funktioniert ... – user2541522

Verwandte Themen