html5手机页面背景图片自适应大小问题

我把背景图片设为background-size:cover;因为页面中有文字的原因,在手机屏幕较宽的机型上会出现页面最下部分没有背景,如果设置为background-si... 我把背景图片设为background-size: cover; 因为页面中有文字的原因,在手机屏幕较宽的机型上会出现页面最下部分没有背景,如果设置为background-size: 100% 100%;,在屏幕较小的机型上不能显示全部内容,导致需要下拉的部分没有背景,怎么处理比较好,求助!!!! 展开
 我来答
大方汤圆r5r
2019-10-22 · TA获得超过5295个赞
知道答主
回答量:49
采纳率:0%
帮助的人:6765
展开全部

1,输入position:fixed;top:0;left:0;将整个div固定在屏羡清幕的顶部和左侧。

2、输入width:100%;height:100%;min-width:1000px;这个可以适合div的高度和宽度,而min-width是为了实现让屏空缓幕宽度在1000px以内时,div的大小保持不变。

3、输入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会斗派模露白,下面两句是为chrome和opera浏览器作兼容。

4、输入background-position:center0;使图片的位置,居中,靠左对齐。

黑马程序员
2017-09-07 · 改变中国IT教育,我们正在行动
黑马程序员
黑马程序员为大学毕业后,有理想、有梦想,想从事IT行业的年轻人改变自己的命运。黑马程序员成就IT黑马
向TA提问
展开全部
  1. 首先需要div布局,HTML布局:

    <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="漏蚂width=device-width, initial-scale=1, 敬搜中user-scalable=no">
<title>背景图片自适应</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
div {
width:  100%;
height: 300px;
background: url('images/slide_01_640x340.jpg') no-repeat;
background-size: 100%  100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

2.HTML代码的截图效果:

3.自适应最重要的样式如下:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

width:  100%;

background-size: 100%  100%;

4.最终的效果是这亮山样:

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
杂五杂六聊热点
推荐于2017-10-01 · TA获得超过211个赞
知道小有建树答主
回答量:257
采纳率:100%
帮助的人:195万
展开全部

这个问题有三种解决方案,都不数高完美

  1.  background-size: 100% 100%;,  保证能与手机胡毕亮屏幕一样大,但是会拉伸压缩裤宽图片导致难看死了

  2. background-size: cover;  适用于chrome,在IE上有问题。

  3. 用插件,backstretch,大小与手机屏幕一样大,有超出部分就截取掉。


综合来说,第三种最好

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式