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正方体旋转示例代码
Aug 08 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
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
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
vue--vuex详解
2019/04/15 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
NumPy 如何生成多维数组的方法
2018/02/05 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
保密工作实施方案
2014/02/24 职场文书
关于责任的演讲稿
2014/05/20 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
工人先锋号申报材料
2014/12/29 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
清明扫墓感想
2015/08/11 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers