zoukankan      html  css  js  c++  java
  • 随内容增加,背景不设高度自适应,背景图不拉伸和变形

    例:

    <div class="honor">
    <div class="honor-pic">
    <p class="trace-prcess" ><i class="honor-icon com-pic"></i>荣誉资质</p>
    <p class="process">HONER</p>
    <p class="line"></p>
    <img class="honor-com honor-pic1" src="images/honor-pic1.png" />
    <img class="honor-com honor-pic2" src="images/honor-pic2.png" />
    </div>
    </div>

    .honor{
    100%;
    overflow:hidden;
    }
    .honor-pic{
    background:url(../images/honor-pic.png);
    background-repeat:repeat-y;
    background-size:100% auto;
    padding-bottom:0.5rem;
    }

    .trace-prcess{
    font-size:0.32rem;
    color:#000;
    text-align:center;
    }

    .honor-icon{
    0.24rem;
    height:0.34rem;
    background:url(../images/honor.png) no-repeat;
    background-size:100% 100%;
    }

    .com-pic{
    display:inline-block;
    vertical-align: middle;
    margin-right: 0.1rem;
    }

    .process{
    font-size:0.28rem;
    color:#9f9f9f;
    text-align:center;
    }

    .honor-com{
    5.88rem;
    display:block;
    box-shadow:0px 0px 20px #666;
    text-align:center;
    margin:0 auto;
    border:3px solid #fff;
    margin-bottom:0.34rem;
    }

    .line{
    0.48rem;
    border-bottom:4px solid #17c13a;
    margin:0.2rem auto;
    }

  • 相关阅读:
    排序算法整理
    V-REP Plugin 开发
    YAML-CPP
    YAML
    V-REP Remote API
    V-REP Plugin
    结构化方法与面向对象方法的比较
    敏捷软件开发vs传统软件工程
    个人项目-地铁出行路线规划程序
    Week1个人作业
  • 原文地址:https://www.cnblogs.com/yingxi0/p/8110349.html
Copyright © 2011-2022 走看看