绝对响应式图像背景

Posted 2023-03-06

【中文标题】绝对响应式图像背景

【英文标题】：absolute responsive image background

【发布时间】：2017-01-20 06:01:44

【问题描述】：

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

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

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

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;
    
  

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

我知道由于 top:0 放置错误，但我不知道如何让它保持在页脚的顶部边框上。

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

【问题讨论】：

请包含完整的标记（HTML 和 CSS），以便可以在问题本身中重现问题。仅发布 CSS 会使您的问题易于解释，并且对可能遇到类似问题的其他人使用较少。

如果线条刚好在图片中间可以设置top:-50%，否则尝试更改值找到正确的

@blonfu top : X% 不起作用，因为当窗口被调整大小时，图像会上升

@Hidden Hobbes 完整标记已添加。

你说得对，是背景图片。也添加background-position: center;

【参考方案1】：

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

  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>

【讨论】：

添加背景位置：左50%；解决这个问题。非常感谢:)

【参考方案2】：

只要您没有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;
  

【讨论】：

不幸的是，当我将顶部：0 更改为底部：100% 时，图像完全超出页脚