css 背景图片撑开容器高度


background-image是属性,不是块元素的内容,是无法撑开高度的。要想实现这种效果,一般通过:after,:before来填充。

   .teamDiv{
      background: url(/image/home_team.jpg);
      background-repeat:no-repeat; 
      background-size:100% 100%;
      background-position-x: center;
      margin: 0 auto;

    }
    .teamDiv::after{
      content: "";
      display: block;
      padding-bottom: 36%;

    }
   <div class=" teamDiv" >
     
      <div class="teamContent">
        <p class="text-center team-title">某某团队</p>


<p class="text-center team-title_en">YOUKING TEAM</p> <p class="text-center team_p">二十年经验的团队</p> <p class="text-center team_p_en">Team of twenty years of experience</p> <p class="text-center team_p">提供高性价比方案的团队</p> <p class="text-center team_p_en"> A team that offers a cost-effective solution </p> <p class="text-center team_p">作品国内外屡获殊荣的团队</p> <p class="text-center team_p_en"> Award-winning team at home and abroad </p> <p class="text-center team_p">思维奔放、严谨做事的团队</p> <p class="text-center team_p_en"> A team that is open-minded and rigorous </p> <p class="text-center team_p">研究创新的团队</p> <p class="text-center team_p_en">Research innovative team</p> <p class="text-center team_p">注重节能的团队</p> <p class="text-center team_p_en">Energy-saving team</p> <p class="text-center team_p">多系统、多元化组合的团队</p> <p class="text-center team_p_en">Multi-system, diverse team</p> </div> </div>

 附加:如果要随着图片的宽高撑开容器,还需要在图片上添加内容(文字说明)的话,那么一般是定位写了。

附加:上面的方法通常图片可能会拉伸,需要计算宽高。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM