如何用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. pdfkit安装使用

    centos 安装pdfkit1.先安装pdfkit依赖包 wkhtmltopdf 安装方式: # wget http://download.gna.org/wkhtmltopdf/0.12/0.12 ...

  2. 基础C++ functional

    函数对象:可以定义函数对象. sort(this->sprites.begin(), this->sprites.end(), [](const struct SpriteInfo &am ...

  3. 20145317《Java程序设计》实验三

    20145317彭垚 实验三<敏捷开发与XP实践> 实验内容 使用 git 上传代码 使用 git 相互更改代码 实现代码的重载 一. 使用git 上传代码 找到Demo1所在文件夹,右键 ...

  4. 资源(1)----封装类(连接数据库mysql,分页)

    一,链接MYSQL数据库 class DBDA{ public $host="localhost";//服务器地址 public $uid="root";//数 ...

  5. Why Apache Beam? A data Artisans perspective

    https://cloud.google.com/dataflow/blog/dataflow-beam-and-spark-comparison https://github.com/apache/ ...

  6. Lazarus -Pascal常量

    2.常量 2.1.普通常量 仅仅下面类型可以被定义为常量Ordinal类型Set类型指针类型 (but the only allowed value is Nil). real类型 Char, Str ...

  7. 删除下标为n的数组值

    Array.prototype.del=function(n) { //n表示第几项,从0开始算起.//prototype为对象原型,注意这里为对象增加自定义方法的方法. if(n<0) //如 ...

  8. ThreadPoolExecutor 分析

    一.从用法入手 Creates a thread pool that creates new threads as needed, but will reuse previously construc ...

  9. java的transient

    今天遇到个了一个问题,在使用Swing的drap and drop处理JTree的时候,我的TreeNode中的UserObject中引用了java.awt.Image类. 然后在dnd的时候会报ja ...

  10. Top Five Communication Skills for Project Managers

    Research among project managers globally identifies top communication skills for leading teams. Lead ...