背景图全屏水平垂直居中的方法

在开发登录页面或者其他全屏背景图的页面，需要背景图全屏并且水平垂直居中，根据浏览器窗口大小自适应。尝试多种方法后，使用了最简单的两行代码搞定。

/* 要想实现全屏高度需要单独设置 html 和 body 的高度 */
html, body {height: 100%;
}.box {width: 100%;  /* block 元素 width 自动100%，可省略 */height: 100%;/* 设置最小宽度和高度 避免垂直居中元素 超出浏览器窗口宽高*/min-width: 1000px;min-height: 800px; /* 以下两行代码 *//* center 是background-position 的值，意为 水平垂直居中 */background: url('../../assets/bg.jpg') center no-repeat; /* 如果背景图宽高不够，该属性可实现全尺寸 */background-size: cover;
}

涉及知识点：

元素的高度默认继承父元素，因此需要单独设置html和body的高度（如果box元素外有父元素，也需要设置高度100%）
背景的知识，background简写形式，背景图定位，不重复，以及背景图尺寸cover，意为拉伸背景实现全尺寸覆盖。

背景图全屏水平垂直居中的方法相关推荐

css禁止背景图拉伸_html-css控制背景图全屏拉伸不重复显示
在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...
HTML背景图全屏显示
要在HTML中实现全屏显示的背景图,可以使用CSS的background属性和一些特定的值来实现.以下是一种方法: HTML: <!DOCTYPE html> <html> & ...
完美的背景图全屏css代码 – background-size:cover?
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法需要的效果图片以背景的形式铺满整个屏幕,不留空白区域保持图像的纵横比(图片不变形) 图片居中不出现滚动条多浏览器支持 ...
background 互联网图片_完美的背景图全屏css代码 – background-size:cover?
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法需要的效果图片以背景的形式铺满整个屏幕,不留空白区域保持图像的纵横比(图片不变形) 图片居中不出现滚动条多浏览器支持 ...
html背景图片手机端全屏,css 背景图全屏显示，兼容移动端
.login { background: url(img/login.jpg) no-repeat center center; background-size: cover; background- ...
html怎么设置背景图一张图平铺,html怎么设置背景图片全屏平铺？_WEB前端开发...
ps画笔工具快捷键是什么?_WEB前端开发 ps画笔工具的快捷键是"B":默认使用前景色绘图,通过设置后可以多种色彩一起绘制.ps的画笔分为了4类:常规画笔.干介质画笔.湿介质画笔 ...
完美的css背景图片全屏显示，能比例缩小，不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...
cf全屏设置win7推荐方法
很多cf玩家在win7系统上玩cf时并不是全屏游戏的,表示玩的很不爽啊,想要在win7系统把cf设置成全屏要怎么操作呢?win7设置cf游戏全屏的方法其实还是挺简单的,小编偶尔也玩了cf,这就给各位友 ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...

背景图全屏水平垂直居中的方法

背景图全屏水平垂直居中的方法相关推荐

最新文章

热门文章