css - 带有渐变的英雄 using::before 无法正常工作

Question

我正在尝试使用 ::before 选择器创建一个带有渐变的主图页面。效果是有效的，但有一个问题；它位置不对，所以我希望它适合 .hero div，但有一些偏移量。

我只能使用绝对位置来完成这项工作，这不是理想的选择。

.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>

你可以去这里测试:http://carey.peopleware.do

Answer 1

您当前将 :before 的值定位为 12vh。这会将元素定位到等于窗口高度的 12% 的位置。这几乎肯定不是您想要的。

给你的 .hero1 元素一个位置值 relative 和 :before top >0:

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

这将使您的 :before 相对于父 hero1 元素定位，并消除您看到的偏移量。