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 相关文章推荐
css图标制作教程制作云图标
Jan 19 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
《神奇的克隆》教学反思
2014/04/10 职场文书
交通文明倡议书
2014/05/16 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
SQL 聚合、分组和排序
2021/11/11 MySQL
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
pt-archiver 主键自增
2022/04/26 MySQL