欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

背景图自适应屏幕宽度,

程序员文章站 2022-05-01 08:10:02
...

直接上代码:

  <div class="img-block">
    <div class="right">
      test
    </div>
  </div>
  .img-block{
    position: relative;
    width: 100%;
    background: url("your img url") center center no-repeat;
    background-size: 100% auto;
    
    &:before{
      content:"";
      padding-top: 41.6406%; // 530/1280 
      display: block;
    }
    
    .right{
      position: absolute;
      width: 50%;
      right: 0;
      top: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255, 0.1);
    }
    
    
    

  }