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即可

时间： 2024-08-26 19:47:11

css实现背景图片全屏的相关文章

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

html,body{ width: 100%; height: 100%; } body{ /*background-repeat: no-repeat;*/ background-size: 100% 100%; } 这个非常关键,不知道网上为什么完全搜不到,就好像没有这个知识点,搜到的都是些瞎扯淡的东西. 我一开始不知道很烦恼,原来要设置html和body的宽高都为100%,dom元素们才有一个基准,要不然怎么设置background-size都是白瞎,是否repeat根据自己需要,如果你的

如何实现图片全屏（当图片大小不够大时）

方法一: 背景图片全屏要点: 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.设置

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

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

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的大

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

CSS设置背景图片代码

CSS设置背景图片代码:设置背景图片并不难,但是有时候会忘记url的格式怎么写,之所以写这篇文章,就是让忘记者查询到,寄希望提供一定的帮助.代码如下: background-image:url(mytest/demo/small.jpg) 相关阅读:1.background属性可以参阅background属性用法详解一章节. 2.background-image可以参阅CSS的background-image属性一章节. 原文地址是:http://www.softwhy.com/forum.ph

HTML学习笔记8——CSS设置背景图片

注意点:   background:blue: 与 background-color:blue: 不一样! 一.关于background设置:   1)background:blue:   2)background-image:url(图片名称): 当背景既有颜色,又有图片时,哪个在后面哪个就生效,如下例所示: 此处写了“新宋体”的这张图片作为本文涉及到的背景图片. 以图片为背景时,若图片小于页面大小,则图片会一直重复直到铺满为止: 字在后面时,字生效 1 <!DOCTYPE html> 2

(转)HTML&amp;CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是

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

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