背景图片全屏自适应关键css代码

html,body{
	width: 100%;
	height: 100%;
}
body{
	/*background-repeat: no-repeat;*/
	background-size: 100% 100%;
}

  这个非常关键,不知道网上为什么完全搜不到,就好像没有这个知识点,搜到的都是些瞎扯淡的东西。

我一开始不知道很烦恼,原来要设置html和body的宽高都为100%,dom元素们才有一个基准,要不然怎么设置background-size都是白瞎,是否repeat根据自己需要,如果你的背景图片足够大,这世界上再没有一台显示器能大过你这图片的尺寸了,你就可以不用加上。否则客户显示器可能大过你的背景图片的话可以加上

时间: 2024-10-13 04:06:13

背景图片全屏自适应关键css代码的相关文章

css实现背景图片全屏

.index{ position: absolute; top:0; bottom:0; left:0; right:0; background:url(../images/cover-default-4_6743235.png) center no-repeat; background-size:cover;} 设置容器的定位为absolute,然后各个方向都为0即可

如何实现图片全屏(当图片大小不够大时)

方法一: 背景图片全屏要点: 1.设置包裹div 高和宽为:100% {width:100%; height:100%;} 2.设置包裹div 的 position为relative (position:relative;) 3.设置背景图片高和宽为:100% {width:100%; height:100%;} 4.设置背景图片position 为absolute {position: absolute;} 5.设置背景图片z-index 为-1 {z-index:-1;} 方法二: 1.设置

html-css控制背景图全屏拉伸不重复显示

在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); background-size: 100%; background-position:center; } 但是background-siz是CSS 3的属性,并不是所有的浏览器都支持. CSS2中并没有图片全屏拉伸的属性,只能想其他办法. 利用一个DIV层,在里面装载一个IMG标签.然后设置DIV和IMG的大

手机端 — 点击图片全屏查看

在公众号中提交服务需求工单后,经过"待分配"."待执行"."执行中"."待验收" 这些阶段后,需要验收人提交评论上传图片才能变成"已完成". 做好后新增点击图片全屏查看的需求,刚开始使用的方法能够做到,但是由于 jquery 的版本冲突,所以不得已换了现在的方法. <div class="add_photo" style="margin-top: 1000px;"

全兼容的全屏自适应布局

1.原理 body, html高度等到全屏高度 使用position:absolute;的方式来定义最外层的div, 内层的div 可以通过height:100%来渲染高, 这样就可以说不用在js的帮助下来实现全立屏的自适应布局 关于兼容 ie6 采用让body的上内边距等到 top 层的高度, 下内边距等到 bottom 层的高度, 通过这样的效果达到中间层高度等height:100%的效果 内层 inner-box 的高度在 ie67 无法实现height:100%的效果, 因为如果在 ie

jquery简单的大背景banner图片全屏切换

详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上线不久,最近整理整理从前的一些小逼格的事 大背景全屏切换效果图:    大背景全屏切换效果html内容: <!--banner图片切换开始--><div class="banner"> <div class="block none">

淘宝店铺基础版全屏装修步骤及代码,已经经过测试

1.淘宝基础版全屏海报旺铺基础版是左右两栏的布局,那我们就把左栏的模块全部删掉,在右栏建立自己的自定义模块,在自定义模块中加入以下代码,产生的效果就是通栏效果.在“加入自己的自定义内容”这句话这里插入自定义代码比如全屏不轮播代码等.<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widge

非常精美的jQuery背景动画全屏焦点图(附源码)

1.  jquery背景动画个性全屏焦点图 源码下载  /  在线演示 2. 圣诞快乐礼盒破裂HTML5特效 源码下载 /  在线演示 3. JS+CSS3实现时间日期特效 源码下载/   在线演示 非常精美的jQuery背景动画全屏焦点图(附源码)

分享jQuery背景动画全屏焦点图

jquery重力实现效果 能在支持 FireFox.Chrome.Safari.傲游.搜狗.360浏览器. 源码下载/   在线演示  jQuery纸张切割效果 源码下载/   在线演示 纯CSS3实现3D小球动画 源码下载/   在线演示 分享jQuery背景动画全屏焦点图