Held mit Farbverlauf mit :: bevor nicht richtig funktioniert

Question

Ich versuche, eine Heldenbildseite mit einem Gradienten mit dem ::before Selektor zu haben. Der Effekt funktioniert, aber es gibt ein Problem. es ist out Position, also ich will es über die .hero div passen, aber es gibt einige Offset.

Ich konnte nur das Arbeiten mit der absoluten Position, die nicht ideal dafür ist.

.hero1 { 
    background: image-url('noche-en-santo-domingo.jpg') no-repeat fixed center; 
    background-size: cover; 
    height: 89vh; 
    &::before { 
    content: ''; 
    position: absolute; 
    top: 6vw; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-image: linear-gradient(to bottom right,#002f4b,#dc4225); 
    opacity: .4; 
    } 

    .intro { 
     padding: 3rem; 
     position: relative; 
     top: 50%; 
     transform: translateY(-50%); 
    } 
} 

<section id="hero" class="hero1"> 
    <div class="row intro"> 
     <div class="small-centered medium-uncentered medium-6 large-7 columns"> 
     <h1>We are caribbean developers</h1> 
     <p><strong>We Help the People make Better Software and we are young people with bilingual skills and professionalism, specializing in various areas of Information Technology (IT)</strong></p> 
     </div> 
     <div class="small-centered medium-uncentered medium-6 large-5 columns"> 
     <div class="tech-img"></div> 
     </div> 
    </div> 
</section> 

Sie können hier gehen und Test: http://carey.peopleware.do

Answer 1

Sie sind zur Positionierung Ihrer :before mit einem Wert von 12vh. Dadurch wird das Element mit einem Wert von 12% der Fensterhöhe positioniert. Das ist fast sicher nicht das, was Sie wollen.

Geben Sie Ihr .hero1 Element einen Positionswert von relative und die :before ein top von 0:

.hero1 { 
    ... 
    position: relative; 
    &::before { 
    ... 
    top: 0; 
} 

dies Ihre :before relativ zum übergeordneten hero1 Elemente positioniert und beseitigt den Offset, dass Sie sehen.

Answer 2

Sie müssen position: relative; zu .hero1 haben, da Sie die absolute Positionierung auf :: before selector verwenden. Auf diese Weise haben Sie keine Offsets.