css 如何让背景图片拉伸填充避免重复显示


Posted in HTML / CSS onJuly 11, 2013

如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。
比如一个容器(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 / CSS 相关文章推荐
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 #HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 #HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 #HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 #HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 #HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 #HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 #HTML / CSS
You might like
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP 正则表达式小结
2015/02/12 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
初学Javascript的一些总结
2008/11/03 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
英文自荐信
2013/12/15 职场文书
丑小鸭教学反思
2014/02/03 职场文书
医德医风自我评价2015
2015/03/03 职场文书
观后感开头
2015/06/19 职场文书