如何用css背景图片拉伸 以及100% 满屏显示呢？这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。
比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 
所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类：

1.是一整张大图，尺寸和区域大小刚好吻合 
2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。

但是css3出现以后，这个情况被改善了。background-size 属性可以让我们之前的希望成真。 
而且这个属性在firefox，chrome，以及ie9上都可以使用。

具体使用方法如下： 
背景图尺寸（数值表示方式）：
代码如下:

#background-size{ 
background-size:200px 100px; 
} 

背景图尺寸（百分比表示方式）：

代码如下:

#background-size2{ 
background-size:30% 60%; 
} 

背景图尺寸（等比扩展图片来填满元素，即cover值）：

代码如下:

#background-size3{ 
background-size:cover; 
} 

背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值）：

代码如下:

#background-size4{ 
background-size:contain; 
} 

背景图尺寸（以图片自身大小来填充元素，即auto值）：

代码如下:

#background-size5{ 
background-size:auto; 
}  
<html>

<head>

	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

</head>

<style>

	#bgvid1{

		width:100%;

		position: fixed; right: 0; bottom: 0;

		min-width: 100%; min-height: 100%;

		height: auto;

		z-index: -100;

		background-size: cover;

	}

</style>

<body>

	<img id="bgvid1" src="fanfan-15.png">

</body>

</html>
 

转载注明本文地址： http://www.ablanxue.com/prone_14261_1.html

css背景图片拉伸 以及100% 满屏显示的更多相关文章

  1. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  2. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

  3. css 背景图片拉伸[转]

    http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-bac ...

  4. CSS背景图拉伸自适应尺寸，全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

  5. css 如何让背景图片拉伸填充避免重复显示

    如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改 ...

  6. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  7. css背景图片位置：background的position（转）

    css背景图片位置:background的position   position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...

  8. css背景图片加载失败，页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  9. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

随机推荐

  1. HDU 1698 线段树 区间更新求和

    一开始这条链子全都是1 #include<stdio.h> #include<string.h> #include<algorithm> #include<m ...

  2. 搭建C语言开发环境

    大学的时候有数据结构这门课,但...终究还是得学.电脑是win8的,根据网上的教程倒是能安装成功vc6.0并且能够打开新建工程,但是一编译运行就提示兼容性问题. 首先安装C语言编译器.下载MinGw ...

  3. php + ajax + html 简单跨域问题

    XMLHttpRequest cannot load http://localhost:8080/abc/index.php. No 'Access-Control-Allow-Origin' hea ...

  4. Android Gradle 编译错误Java finished with non-zero exit value 2

    出现这个错误主要有两类错误 依赖包重复 方法数超过65K 针对第一种错误,可能是由于build.gradle里写了 compile fileTree(dir: 'libs', include: ['* ...

  5. 【转】CSS（10）盒子模型

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

  6. [qemu] 挂载qcow2文件，qcow2里边还有个lvm

    环境:archlinux 背景:在虚拟机里玩dpdk,把挂载HugePage(hugetlbfs)的命令写入fstab的时候,写错了,无法启动,需要把qcow2挂起来改一下. 方法:使用qemu-nb ...

  7. Redis学习二 C#中如何进行这五种数据类型的操作

    我在网上找了好久,就是没有找到Redis和C#结合的书,都是和别的编程语言在一起鬼混. 简单的用C#实现向Redis中插入那我中类型的数据 首先需要到NuGet 里面下载 Redis IDatabas ...

  8. Linux QtCreator设置mingw编译器生成windows程序

    Qt跨平台,那必须在Linux平台编译一个可以在windows下运行的Qt程序才行,当然还得和QtCreator环境弄在一起才行. 工作环境:Centos 7 yum install qt5-qt* ...

  9. 【Android开发学习笔记】【第八课】五大布局-下

    概念 五大布局上一篇文章已经介绍了 LinearLayout RelativeLayout 这一篇我们介绍剩下的三种布局 FrameLayout 五种布局中最佳单的一种布局.在这个布局在整个界面被当成 ...

  10. Cocos2d-JS轻量级开发

    官方提供了另外一种使用cocos2d js的方式,更适合web开发者,只要引用一个js就可以了 1.下载Cocos2d-JS Lite Version(去下载>>) 下载下来的将是一个完整 ...