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实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 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
DISCUZ 分页代码
2007/01/02 PHP
php去除HTML标签实例
2013/11/06 PHP
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
jquery异步调用页面后台方法‏(asp.net)
2011/03/01 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
nodejs读取并去重excel文件
2018/04/22 NodeJs
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
vue 中几种传值方法(3种)
2019/11/12 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
浅谈五大Python Web框架
2017/03/20 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python软件都是免费的吗
2020/06/18 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
公司门卫管理制度
2014/02/01 职场文书
设计师个人求职信范文
2014/02/02 职场文书
商场总经理岗位职责
2014/02/03 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
法人委托书
2014/07/31 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书