首页 > 代码库 > html始终让元素居中显示,背景图铺满随便拖动不出界
html始终让元素居中显示,背景图铺满随便拖动不出界
首先。写两个class属性
body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Content/Images/background.jpg); background-repeat: no-repeat; background-size: cover; }
.login { height: 300px; width: 400px; border: 1px solid #f00; position: absolute; left: 50%; top: 50%; margin: -150px 0 0 -200px; }
上面body设置了背景图,长跟宽百分比为100%。背景图不反复,大小为覆盖整个浏览器。
login样式是登录框。高度宽度都固定好。然后border仅仅是为了定位显示方便查看,定位后可取消。
位置为绝对属性,向左保持50%宽度,向上保持50%宽度。
magin属性的话,-150px就是将登录框向上移动150px,那么登录框正好有150px在浏览器中心上面,有150px在浏览器中心以下。
那么-200px也是同理的。
而且无论你怎么缩小浏览器窗体,背景图都不会出现空白区域。窗体也依旧在浏览器中心。
即使更换了显示器分辨率,窗体依旧在浏览器中心。
html始终让元素居中显示,背景图铺满随便拖动不出界
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。