设置背景图片
2016-10-27 00:00
162 查看
<style> body { background-image: url('http://www.taohuanhuan.com/cz.jpg'); background-size: 100% 100%; } </style>
background-size语法
w3c对background-size的语法规定如下:属性名: | background-size |
---|---|
属性值: | <bg-size>* 其中 bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain |
初始值: | auto auto |
应用于: | 所有元素 |
继承性: | 无 |
百分比: | 见下文注解 |
计算值: | 根据指定 |
1、length,percentage,根据给定长度值或者百分比来调整背景图片大小。auto为默认值,这三个值最小可重复一次,最大重复两次。对于这些值有以下解释:
第一个值为设置图片宽度,第二个值为图片的高度;但是不管是用什么值,都不能为负值
假如只给定一个值,那么第二个自动的为 'auto';
假如指定为
percentage百分比值,那么背景图大小是根据相对的背景区域来做调整,这个背景区域是由background-origin来来决定的。这在上面已经有提到过了关于图片原点的讨论。这里有必要提到 假如
background-attachment:fixed,那么其背景相对区域就是初始包含块也就是视窗。
/* 一个值: 这个值指定图片的宽度,那么第二个值为auto */ background-size: auto background-size: 50% background-size: 3em background-size: 12px /* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */ background-size: 50% auto background-size: 3em 25% background-size: auto 6px background-size: auto auto /*多重背景,请用逗号隔开,在CSS语法中凡语法后跟*或者#,都是可以无限重复的,但是必须用逗号隔开。 */ background-size: auto, auto /* 不要跟background-size: auto auto混淆了 */ background-size: 50%, 25%, 25% background-size: 6px, auto, contain background-size: inherit2、contain,按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。看以下代码
.im-com{ width:200px; height:50px; background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll; /*图片的宽高为440*440,而元素相对区域高度为50*/ background-size:contain; } .im-com-1{ width:50px; height:100px; background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll; /*元素相对区域宽度为50*/ background-size:contain; }当图片恰好自适应铺满元素的宽度或者高度,那么元素的会有空白处存在,也就是图中红色框框都显示了空白。 2、cover,按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。
.im-com{ width:200px; height:50px; background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll; /*图片的宽高为440*440,而元素相对区域高度为50*/ background-size:cover; } .im-com-1{ width:50px; height:100px; background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll; /*元素相对区域宽度为50*/ background-size:cover; }当使用了
cover这个值的时候,那么正好就跟contain相反,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见,如下图的狗的下半身和右侧身体显示不全。
说说背景图片计算值
假如说只是拿单一的数值或者具体数值来解释那理解起来应该不难,但假如用混合长度来说,可能会有点一下子明白不上来。规范给了几个例子,不妨拿出来一下:先声明,所以的元素尺寸为 100*100
100% 100%背景图片将铺满整个内容区,假如说元素有固有宽高,那么背景图片铺满整个100*100背景区域 div { background-image: url(plasma.png); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box } 背景图片调整为宽度为50*50,但是背景图片的原点位置为边框box而不是padding-box p { background-image: url(tubes.png); background-size: 50% auto; background-origin: border-box } 背景图片尺寸调整为15*15 para { background-size: 15px 15px; background-image: url(tile.png)} 这是默认值,也就是auto auto,此时背景图片的尺寸将会是跟图片的固有尺寸一样. body { background-size: auto; /* 默认值 */ background-image: url(flower.png) } 假如两个都是百分比,此时图片就会根据背景区域来按照宽高比自适应,此处背景图片为20*30,但是因为背景重复用了 'round'循环,因此背景区域高度划分了3个33.3等高区域,所以背景图片会自适应调整为20*33.3 p { background-image: url(chain.png); background-repeat: no-repeat round; background-size: 20% 30% }在MND帮助文档中还提到了关于火狐的渐变图片背景问题,不过那是涉及到Firefox8,规范中不推荐同时使用px和auto,因为在8以前的火狐浏览器不支持重复渲染,但是我在caniuse上看见的版本是31+,so,你就尽情的用吧。并且对于移动浏览器的支持还是非常的好的,请看下图可知,除了opera8部分不支持以外:
应用场景
目前用到background-size的场景都是基于webapp的背景图上,大致的情况是,比如说最常见的logo作为某个元素的背景,但logo很复杂,假如说我们按照设计图上的去切片的话,那会有两种可能:
1、按照csser的分辨率去切片,比如高度为50px,logo被直接缩放到50px那就会很别扭,而且估计那那画面太美,你都不敢看;
2、按照射击湿设计的分辨率去切的话,有可能设计图的logo尺寸会很大,但是我们csser写的时候高度只有50px,那logo就会显示不全;
这时候background-size就发挥其重要的作用了,我们可以通过对背景图片大小的自适应缩放,而不会影响到起美观性又能全部显示我们所需要的效果.
部分内容来自:◎前端路人乙xiaoho.com
最后还一个可以设置背景图片的,但是好像,我做的有问题,留做以后研究、
<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div> <script type="text/javascript"> $(function(){ $('#formbackground').height($(window).height()); $('#formbackground').width($(window).width()); }); </script> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"/>
相关文章推荐
- 自定义一个带缩略图的背景图片设置的preference
- Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
- Qt: windows下设置指定图片填充形成桌面背景.(实测)
- IOS 在IOS6中设置navigationBar背景图片 会有一条 黑色阴影 --- 解决方案
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案二
- Gtk设置窗体的背景图片
- 安卓工作室android studio 美化 ,设置背景图片。
- Html设置网页背景图片
- 将图片设置成背景图片
- 如何为frame窗口设置背景图片
- MFC 设置Dialog背景图片
- 百度首页背景图片设置-图片撑满整个body效果
- 关于background设置多个背景图片的问题
- 为对话框设置背景图片为指定的bmp文件
- 解决listview设置背景图片以后,拖动出现黑色的问题。
- img 标签导入png图片背景设置透明
- android中自定义Button,设置不同背景图片。
- java 在 jpanel中设置背景图片
- QWidget的背景颜色和背景图片的设置
- Silverlight背景图片设置