CSS实现背景图片全屏铺满自适应的3种方式


Posted in HTML / CSS onJuly 07, 2022

一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。

因此,今天我们将与你分享3种CSS实现背景图图片全屏铺满自适应的方式,希望对你有所帮助。

01

margin:0px;
background: url(images/bg.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
url(images/beijing.png)——图片路径的位置;

no-repeat—— 图片不重复;

center 0px——center是距离页面左边的定位,0px是距离页面上面的定位;

background-position: center 0——就是图片的定位,同上;

background-size: cover;——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;

min-height: 100vh;——视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小。

02

background: url("bg.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;//或者background-size:100%;

03

给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。

css body标签的样式如下:

body {
/* 加载背景图 */
background-image: url(images/bg.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}

到此这篇关于CSS实现背景图片全屏铺满自适应的3种方式的文章就介绍到这了,更多相关CSS背景全屏铺满自适应内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 #HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 #HTML / CSS
CSS SandBox应用场景及常见问题
CSS的calc函数用法小结
Jun 25 #HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 #HTML / CSS
css3手动实现pc端横向滚动
Jun 21 #HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 #HTML / CSS
You might like
索尼ICF-SW100收音机评测
2021/03/02 无线电
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
javascript 树控件 比较好用
2009/06/11 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
基于Django用户认证系统详解
2018/02/21 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
《菜园里》教学反思
2014/04/17 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
工程技术员岗位职责
2015/04/11 职场文书