css背景图片拉伸 以及100% 满屏显示
如何用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: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% 满屏显示的更多相关文章
- 兼容各浏览器的css背景图片拉伸代码
需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...
- css背景图片拉伸
css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...
- css 背景图片拉伸[转]
http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-bac ...
- CSS背景图拉伸自适应尺寸，全浏览器兼容
突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...
- css 如何让背景图片拉伸填充避免重复显示
如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改 ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- css背景图片位置：background的position（转）
css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...
- css背景图片加载失败，页面部分图标无法显示
1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
随机推荐
- #define与运算精度问题探究
#include <stdio.h> #define SQR(X) X*X int main(int argc, char* argv[]) { ; ; ; printf("SQ ...
- ADO 事务
Ado.Net事务处理.在ADO.NET 中,可以使用Connection 和Transaction 对象来控制事务.若要执行事务,请执行下列操作:• 调用Connection 对象的BeginTra ...
- Cacti安装详细步骤
原文链接: https://www.centos.bz/2012/01/cacti-install-tutorials/ Cacti-监控MySQL: http://www.cszhi.com/201 ...
- Delphi下的OpenGL开发入门
unit Unit1; interface uses OpenGL,Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls ...
- MySQL安装图解教程
安装文件存放路径:不能有中文和空格! 校验 1 安装MySQL 2 校验MySQL 登录MySQL:mysql -uroot -p123 退出MySQL:exit | quit 查看数据库:show ...
- SQL查询的几种方式
/* 左连接 left join 或者 left outer join */ /* 左连接 Table_A表数据全部显示,Table_B根据条件匹配Table_A 匹配上显示,否则显示NULL */ ...
- Redis学习笔记(2)-String
package cn.com; import java.util.List; import redis.clients.jedis.Jedis; public class Redis_String { ...
- Dlib is a modern C++ toolkit（非常全面的类库）
http://dlib.net/ http://download.csdn.net/detail/lajuedan2508/9726225 http://download.csdn.net/detai ...
- 基于vs2005以上版本Qt程序发布的注意事项（讲了manifest的问题）
最近发现了一个非常恼人的程序deployment的问题,估计大家有可能也会遇到,特此memo. 问题的出现我觉得主要还是微软搞的花头太多, 一个不知所谓的manifest文件让本来简单的程序发布变得困 ...
- git中应用在vs中使用gitignore （转）
在进行协作开发代码管理的过程中,常常会遇到某些临时文件.配置文件.或者生成文件等,这些文件由于不同的开发端会不一样,如果使用git add . 将所有文件纳入git库中,那么会出现频繁的改动和push ...