• 随内容增加,背景不设高度自适应,背景图不拉伸和变形


    例:

    <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;
    }

  • 相关阅读:
    vue类似tab切换的效果,显示和隐藏的判断。
    vue 默认展开详情页
    vue echarts圆角阴影效果
    vue画图运用echarts
    随机函数rand()
    Qt解析CSV文件
    Qt生成CSV 文件
    QRegExp解析
    Qt中csv文件的导入与导出
    Qt 生成word、pdf文档
  • 原文地址:https://www.cnblogs.com/yingxi0/p/8110349.html
Copyright © 2020-2023  润新知