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制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 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
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
2014大学生全国两会学习心得体会
2014/03/13 职场文书
2015年社区文体活动总结
2015/03/25 职场文书