html5 - 如何让背景图在手机端全屏显示(内容比较长,有滚动条),保证图片不变形的情况?
为情所困
为情所困 2017-05-16 13:25:30
[CSS3讨论组]

我的手机端网页需要背景图,怎么才能让背景图全屏显示,而且不变形呢 ?
我现在的设置,背景是变形的!求大神!

为情所困
为情所困

全部回复(4)
高洛峰

background-size:100% auto;

过去多啦不再A梦

你可以尝试不设置背景图,而是使用img标签来显示背景图片。

<p class="page">
    <img class="bg"/>
    <p class="page_Con">
    </p>
</p>

.page{position:relative;height: 100%;overflow:auto;}
.bg{width:100%;height:100%;}
.page_Con{position:absolute;top:0;left:0;width:100%;height:100%;}
巴扎黑

background-size:cover;你要先在body和HTML 中设置width

给我你的怀抱

既不拉伸图片又要完全展示,真是执着于这个的话,给设计提个参考方案吧:
把图片的轮廓羽化后,加个背景色,再去拿到图片背景色的色值,在main_bg中设置css属性:

background-color: white;// 拿到的图片背景色
background-image: url('链接');
background-size: 95%;  //可以写成固定值
background-repeat: no-repeat;
background-position: center;
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号