zoukankan      html  css  js  c++  java
  • 关于app背景图被拉伸的问题

    最近在做APP项目时,遇到一些商城活动页需要使用背景图的问题,但是要适用不同手机型号,尤其是现在的大屏幕手机,手机普遍比较长的兼容性问题。

    刚开始是直接用jpg图片做背景图,考虑到jpg图片要比png图片小,但是效果不是很理想,出现图片被拉伸的问题。

    最后使用的是用png图片,把相关元素抠出来放在一张图片上,然后用背景颜色进行填充。

     高度height设为100vh,及手机整屏的高度;

    背景background设置图片颜色、top、center;

    背景图大小设为图片大小,这样就可以保证图片不失真,超过图片的高度就使用背景颜色进行填充。

    .jiaRuYaoQing{
         100%;
        height: 100vh;
        background: #ED6260 url(~@/static/img/pageimg/jiaRuYaoQing_bg.png) no-repeat top center;
        background-size: 750upx 1265upx;
    }
  • 相关阅读:
    [HNOI2019]JOJO
    [TJOI2019]唱、跳、rap和篮球
    [ZJOI2019]开关
    jzoj5746
    [JSOI2019]神经网络(指数生成函数)
    [TJOI2019]甲苯先生的线段树
    [JSOI2019]节日庆典
    XSY1519
    XSY1528
    springboot actuator监控笔记
  • 原文地址:https://www.cnblogs.com/cqiong/p/14239276.html
Copyright © 2011-2022 走看看