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实现立方体自转效果
Mar 01 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
amaze ui 的使用详细教程
Aug 19 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
PHP文本操作类
2006/11/25 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
详解php中反射的应用
2016/03/15 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
EJB的激活机制
2013/10/25 面试题
学生评语大全
2014/04/18 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
邀请函范文
2015/02/02 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
python Polars库的使用简介
2021/04/21 Python
python实现简单的聊天小程序
2021/07/07 Python