CSS3之让背景图片全部显示

起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下。

background-size

首先声明

background-size是一个css3属性。翻译过来很容易就知道它是用来规定背景尺寸的。

关于浏览器兼容性

IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+。

用法

background-size有4个值分别是(length | percentage | cover | contain)。

length: 它主要是用来规定背景的宽(width)和高(heigth)。eg: background-size: 100px 100px;

percentage: 它主要是用来以父元素的百分比来设置背景的宽高。 eg: background-size: 50% 50%;

length和percentage的用法其实是相似的, 都是通过设置背景的长宽来显示图片。如果只有一个参数, 则表示另一个参数为auto。

cover: 它主要表示把图片扩展到足够大, 以使背景图像完全覆盖背景区域。这里要注意背景图像的某些部分也许无法显示在背景定位区域中。eg: background-size: cover;

contain: 它主要表示把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。eg: background-size: contain;

完全显示图片内容

随便在网上找了张图片url(‘http://demo.sc.chinaz.com//Files/DownLoad/moban/201512/moban869/images/banner.jpg‘)

background-size: contain;
background: url(‘http://demo.sc.chinaz.com//Files/DownLoad/moban/201512/moban869/images/banner.jpg‘) no-repeat

时间： 2024-12-20 01:09:04

CSS3之让背景图片全部显示的相关文章

img只显示图片一部分或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置部分代码:<style type="text/css">img {position:abs

div嵌套div 背景图片不显示的问题

这几天在做一个小Demo的时候碰到了如上的问题,一个DIV嵌套多个DIV时,父容器DIV不显示背景图片.同时结合之前碰到类似的问题,我归纳了如下几个解决方法: 1.就是常见的子div 背景把父div的背景给盖住了,例子: 该例子就是我有一个父div 和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的,其中父div的背景图片就是上面这张图片(箭头部分是透明的),子div的背景图片是那种渐变灰色图片,其实懂英语的人应该看出来了就是,我想实现一个那种类似于iphone滑动那种灯光从

laravel项目中css样式表的背景图片不显示

刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd { background: url(../images/sky/body_bg.png) repeat-x 0px 0px; } 按理上面的写法没错,因为是从别的后台搬过来的,但是图片一直不显示,访问绝对路径却又能显示图片,坑. 原因是因为图片路径要使用单引号或者双引号的,下面是正确的写法 .mainhd { background: url('../images/sk

extjs中新建窗体时，给窗体添加背景图片不显示问题之一

1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了 layout: 'fit', Ext.create('Ext.Window', { title: '客户关系管理系统', width: 1024, height: 600, //plain: true, bodyStyle: 'background:url(images/登录背景.jpg);', headerPosition: 'top', layout: 'fit', items: { bor

background-size引发的背景图片不显示的问题

background-size 这个背景属性在移动开发大家应该都有使用,而且会有一种用得很爽的感觉.今天后台哥突然找我说页面中所有的背景图片显示不了.赶紧拿起手机,开启原生的浏览器打开一看,果然...所有背景图片均显示不了(ps:为什么之前没有发现..因为切页面时是用chorme插件看效果得).有问题那就要马上验证解决.一番风过雨过后..终于找到原因并解决了. 引发问题的css背景写法: 1 background:url(image url) no-repeat 0 0; 2 @includ

IE下背景图片不显示问题

转自:http://www.jb51.net/css/119341.html 在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来,具体的写法如下,有类似情况的朋友可以参考下很久木有写点什么了,最后干的活比较杂.除了公司里的事情之外,还写了点别的东西. 刚写一个页面,在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来. 调试N遍后,只好上stackoverflow去找一下,果然找到了. 最初是这样写的:

cell添加选中时的背景图片、显示图片和图片自适应框的大小

1.给cell添加选中时的背景图片 UIView *myview = [[UIView alloc] init]; myview.frame = CGRectMake(0, 0, 320, 47); myview.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"0006.png"]]; cell.selectedBackgroundView = myview; 2.显示图片 CGRect my

CSS3：background-size背景图片尺寸属性

background-size可以设置背景图片的大小,数值包括长度length和百分比percentage. 并且会根据背景原点位置background-origin设置其图片覆盖的范围.那么下面我们一起来了解这个background-size属性吧. background-size语法 w3c对background-size的语法规定如下: 属性名: background-size 属性值: <bg-size>* 其中 bg-size = [ <length> | <pe

ie8 background背景图片不显示问题

在chrome,FF可以显示,但是在ie8背景图片显示不出来 css改为如下可以正常显示: background: url(../images/goods.png) no-repeat !important;