前端 - 网页开发里如何让图片只显示中间部分的内容-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

前端 - 网页开发里如何让图片只显示中间部分的内容

高洛峰 2017-04-17 11:51:04

[HTML讨论组]

1229

譬如我有一个背景图片，宽高分别是1400：900，由于屏幕大小限制，只能显示1000：800，那么如何保持图片的原始大小，同时图片显示的范围为图片的正中央。
随着窗口的扩大，显示的内容才会扩大。

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(5)

ringa_lee2017-04-17 11:53:04 5楼

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-image: url();
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

背景图要足够大。

赞 +0

添加回复

ringa_lee2017-04-17 11:53:04 4楼

background-position:50% 50%

赞 +0

添加回复

高洛峰2017-04-17 11:53:04 3楼

background-size:cover
该属性属于css3
低级别浏览器不支持

赞 +0

添加回复

伊谢尔伦2017-04-17 11:53:04 2楼

html {
  height: 100%;
}

body {
  min-height: 100%;
  background:url(../images/img.png) no-repeat center center;
  background-size: cover;
}

赞 +0

添加回复

天蓬老师2017-04-17 11:53:04 1楼

可以不做成背景的截取中间部分吗？

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>