如何用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. 20145317彭垚 《Java程序设计》第8周学习总结

    20145317彭垚 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 1.NIO的定义 InputStream.OutputStream的输入输出,基本上是以字节为单位进行 ...

  2. 基于LR的HTTP协议接口性能测试脚本实例

    背景介绍 XXX项目性能测试中新增业务场景:XX设备的在线激活,因为存在多用户同时在线激活,故需进行性能测试以确认后台服务器系统在多用并发时功能是否正常,性能指标是否满足规格要求.用户使用场景为用户通 ...

  3. Technical analysis of client identification mechanisms

    http://www.chromium.org/Home/chromium-security/client-identification-mechanisms Chromium‎ > ‎Chro ...

  4. 【Android测试】【第五节】LogCat——命令行

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4684123.html 前言 上一篇将的是如果在eclips ...

  5. DOCTYPE、指定语言、字符集

    <!DOCTYPE html> 在HTML的最开始部分声明DOCTYPE文档类型,可以让浏览器或其他用户代理知道你要使用的Html语言类型:无论你打算使用何种类型的HTML语言,DOCTY ...

  6. 安装CentOS Core之后布置环境脚本

    #启动ssh服务 service sshd start #安装vim编辑器 echo y | yum install vim #安装网络工具包 echo y | yum install net-too ...

  7. IOS证书的申请和使用

    苹果的证书繁锁复杂,制作管理相当麻烦,今天决定重置一个游戏项目中的所有证书,做了这么多次还是感觉很纠结,索性直接记录下来,日后你我他查阅都方便: 关于证书 苹果使用密文签名技术来验证App的合法性,不 ...

  8. ajax处理回调函数，用ajax向后台发送数据

    这是我的后台返回给前台的数据: 处理后台返回的数据有一下两种方式: function sethouse_housing_pattern(housing_pattern){ var str=[]; va ...

  9. SQL Server 用SQL语句查找某个表的触发器

    select   *   from   sysobjects   where   xtype='TR'   and   parent_obj=object_id('表名') 再用sp_helptext ...

  10. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...