如何用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. web接入层 传入参数的格式化及web返回值传出数据的参数格式化，都要统一

    1.web接入层 传入参数的格式化及web返回值传出数据的参数格式化,都要统一. 比如acSpace中, 传入层参数@RequestBody javaBean对象.统一转换为javabean传入参数. ...

  2. Unity中的协程(一)

    这篇文章很不错的问题,推荐阅读英文原版: Introduction to Coroutines Scripting with Coroutines   这篇文章转自:http://blog.csdn. ...

  3. oracle创建dblink问题

    1.如果在本地"D:\oracle\product\11.2.0\dbhome_1\NETWORK\ADMIN\tnsnames.ora"中设置 服务器数据库连接,必须再服务器设置 ...

  4. freemarker 自定义标签

    1.编写标签类 package com.pccw.business.fnd.common.filegen; import java.io.IOException; import java.io.Wri ...

  5. ajax普通弹窗；Bootstrp弹窗

    1.普通弹窗 主页面: <head> <meta http-equiv="Content-Type" content="text/html; chars ...

  6. NRF51822之发射功率

    设置蓝牙的TX Power 使用的函数sd_ble_gap_tx_power_set(int8_t tx_power);   参看例子为 S110/ble_app_proximity #define ...

  7. Spring @Resource、@Autowired、@Qualifier的区别

    @Resource默认是按照名称来装配注入的,只有当找不到与名称匹配的bean才会按照类型来装配注入: @Resource注解是J2EE提供,而@Autowired是由Spring提供,故减少系统对s ...

  8. 【Android测试】【第十一节】Uiautomator——简介

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4872244.html 前言 在App的测试中,除了单元测试 ...

  9. IIS Express启动命令

    http://www.iis.net/learn/extensions/using-iis-express/running-iis-express-from-the-command-line C:\P ...

  10. 设计模式：单例模式（Singleton）

    定义:确保一个类仅有一个实例,并提供一个访问它的全局访问点. 优点:在内存中只有一个对象,节省了内存空间 示例: Singleton.cs 写法一:非线程安全 public class Singlet ...