Question

由于我的页脚中背景图片的位置，我有一个小问题。

正如你在图片上看到的那样，我的当前背景图片（带球的绿色虚线 - 它是svg图像）放在中间，如果页脚。

我想将它放在红线的位置，在调整窗口大小时停留在那里。代码是：

＆＃13;

footer{
  position: relative;
  
  /* START OF IMAGE BG */
  &:before{
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/wp-content/themes/company/static/img/line.svg");
    -moz-background-size:90%;
    background-size:90%;
    background-repeat: no-repeat;
  }
  /* END OF IMG BG */  
  
  padding: rem-calc(45 20);
  @media #{$medium-up}{
    padding: rem-calc(85);
  }
  background-color: $bluedark;
  color: $white;
  min-height: rem-calc(500);
  p{
    font-size: rem-calc(12);
    @media #{$medium-up}{
      font-size: rem-calc(16);
    }
    font-weight: 300;
    &.section-header{
      text-transform: uppercase;
      font-weight: 600;
    }
    &.bold{
      font-weight: 600;
    }
    &.green{
      color: $green;
    }
  }
  .social-media{
    img{
      display: inline-block;
      margin: rem-calc(0 5 20 5);
      max-height: rem-calc(20);
      @media #{$medium-up}{
        max-height: rem-calc(40);
      }
    }
  }
  .underline{
    margin-top: rem-calc(50);
    border-top: 1px solid $bluegrey;
    padding-top: rem-calc(20);
    .logo{
      float: left;

      width: rem-calc(200);
      height: rem-calc(45);
      background: url("/wp-content/themes/company/static/img/logo_light.svg");
      background-size: contain;
      background-repeat: no-repeat;
    }
    select{
      float: right;
    }
  }
}

＆＃13;

而html是：

<footer>
<div class="line"></div>
<div class="flex">
    <div class="row">
        <div class="large-3 columns">
            <p class="section-header">O nas</p>
            <p>O Firmie</p>
            <p>Zespół</p>
            <p class="green">Blog</p>
        </div>
        <div class="large-3 columns">
            <p class="section-header">Pomoc</p>
            <p>FAQ</p>
            <p>Regulamin</p>
            <p>Polityka prywatności</p>
        </div>
        <div class="large-3 columns">
            <p class="section-header">Social Media</p>
            <div class="social-media">
                <img src="{{site.theme.link}}/static/img/social-media/facebook.png">
                <img src="{{site.theme.link}}/static/img/social-media/twitter.png">
                <img src="{{site.theme.link}}/static/img/social-media/instagram.png">
            </div>
        </div>
        <div class="large-3 columns">
            <p class="section-header">Kontrakt</p>
            <div class="button green">Formularz kontaktowy</div>
        </div>
    </div>
    <div class="row underline">
        <div class="logo"></div><span>
        <select>
          <option value="Polski">Polski</option>
          <option value="English">English</option>
        </select>
    </div>
</div>

我知道这是错误的，因为顶部：0然而我不知道如何使它保持在页脚的顶部边界。

如果有任何帮助，我将不胜感激。

Answer 1

只要您没有overflow个问题，您只需将top:0替换为bottom:100%

即可。

footer{
  position: relative;
  &:before{
    content: "";
    position: absolute;
    display: block;
    bottom: 100%; /* change here */
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 50%;
    background: url("img/line.svg");
    -moz-background-size:90%;
    background-size:90%;
    background-repeat: no-repeat;
  }

Answer 2

你的一个类似的例子，我认为它对你的purpouse有用：

  div {
    border: solid 1px green;
    margin-bottom: 20px;
  }
  
  footer {
    position: relative;
    height: 50px;
    background-color: red;
    text-align: center;
    padding-top: 20px;
  }
  
  footer:before {
    content: "";
    position: absolute;
    display: block;
    top: -50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("http://www.curtainshopsouthport.co.uk/scissors.png");
    -moz-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: left 50%;
  }

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quis placeat architecto dolore recusandae nam amet, voluptate consequatur tenetur, quibusdam cupiditate culpa perferendis praesentium ab quasi voluptatum doloremque illum suscipit ea. Placeat
  aperiam tempore maiores minus harum sint debitis beatae sit, eos voluptas est temporibus animi ullam praesentium voluptates molestiae dolore illo officiis blanditiis dolores. Qui labore asperiores quia dolore amet, culpa consectetur est quibusdam iusto
  incidunt maxime aliquid sit eius explicabo aut, possimus corporis temporibus. Alias officia libero repellat veritatis, obcaecati repudiandae at voluptas, maxime doloremque facilis, sunt praesentium voluptatibus eaque provident natus, earum asperiores?
  Possimus voluptatem, soluta deserunt.</div>
<footer>footer</footer>

绝对响应图像背景

2 个答案: