如何用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. 获取在attr.xml中声明的主题样式

    在换肤时,先在attr.xml中定义Resource的属性名,再到stytle中,根据不同的主题,给属性赋值. 在布局文件中可直接以  android:background="?attr/a ...

  2. HTML Questions:Front-end Developer Interview Questions

    What's a doctype do? Instruct the browser to render the page. What's the difference between standard ...

  3. linux回到上次目录与历史命令查找快捷方式

    # cd -进入上次访问目录 二.历史命令搜索操作快捷键:[Ctrl + r], [Ctrl + p], [Ctrl + n] 在终端中按捉 [Ctrl] 键的同时 [r] 键,出现提示:(rever ...

  4. Off-heap Memory in Apache Flink and the curious JIT compiler

    https://flink.apache.org/news/2015/09/16/off-heap-memory.html   Running data-intensive code in the J ...

  5. C++ - 扩展欧几里德算法非递归实现

    #include <iostream> using namespace std; int x, y; void get_x_y(int a, int b){ int q, r[3], s[ ...

  6. Java 获取类名，函数名，行数

    C++下用宏来实现.分别是__FILE__,__func__,__LINE__分别代表,C++编译自动在每个文件中设定__FILE__类型是字符串常量 ,将__LINE__替换为当前行数,类型是数字常 ...

  7. opencv提取截获图像（总结摘来）

    opencv提取截获图像(总结摘来) http://blog.csdn.net/wuxiaoyao12/article/details/7305865 版权声明:本文为博主原创文章,未经博主允许不得转 ...

  8. 蓝牙的AVCTP协议笔记

    1.概述     AVCTP协议描述了蓝牙设备间Audio/Video的控制信号交换的格式和机制,它是一个总体的协议,具体的控制信息由其指定的协议(如AVRCP)实现,AVCTP本身只指定控制comm ...

  9. hadoop 2.4 伪分布式模式

    1.core-site.xml 在<configuration></configuration>中插入 <property> <name>fs.defa ...

  10. 【Android测试】【第一节】性能——CPU

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5065083.html 前言 本来打算写完全部的自动化测试之 ...