起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了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

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

  1. background属性冲突导致的部分浏览器背景图片不显示问题

    前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样 首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...

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

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  3. CSS3全新的背景图片方案

    CSS3全新的背景图片方案 firefox支持指定一个元素的ID将它作为另一个元素的背景-moz-element(#ID), webkit系支持-webkit-canvas(xxxx)动态创建一个ca ...

  4. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

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

    1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了  layout: 'fit', Ext.create('Ext.Window', { title: ...

  6. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  7. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  8. IE下背景图片 不显示问题

    转自:http://www.jb51.net/css/119341.html 在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来,具体的写法如下,有类似情 ...

  9. css奇特用法之 IMG添加背景图片配合显示--效果惊艳

    IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...

随机推荐

  1. ARP (地址解析协议)

    地址解析协议,即ARP(Address Resolution Protocol),是根据IP地址获取物理地址的一个TCP/IP协议.主机发送信息时将包含目标IP地址的ARP请求广播到网络上的所有主机, ...

  2. Mybatis if test中字符串比较

    <if test=" name=='你好' "> <if> 这样会有问题,换成 <if test=' name=="你好" '&g ...

  3. AFNetworking 3.1

    听说之后AFHttpWorking版本可能会影响到苹果的审核,今天下了最新版本的AFHttpWorking,并且做了简单的封装,我这里是通过cocoapods下载了两个工具 1=AFHttpWorki ...

  4. mybatis There is no getter for property named 'xxxx

    mybatis There is no getter for property named 'xxxx 360反馈意见截图16230322799670.png http://blog.sina.com ...

  5. coreseek (sphinx)+ Mysql + Thinkphp搭建中文搜索引擎详解

      一, 前言    1,研究coreseek的动机 我有一个自己的笔记博客,经常在上面做一些技术文章分析.在查询一些文章的时候,以前只能将要查询的内容去mysql中用like模糊匹配.在文章多了的情 ...

  6. 初识 PHPunit stub 模拟返回数据

    这是这段时间以来结合 PHPunit 文档和大牛们的讲解,想记录下自己学习到的知识,未来参考补充,完善学到的东西 我们一般使用单测对公司业务里的代码进行测试,他会帮忙找到你的一个个小小的思考不够全面的 ...

  7. 已解决:Ubuntu php gettext 无效

    使用gettext做多文字国际化,按PHP官方文档,在CentOS上OK,在Ubuntu上不行,调试了快1天,试了网上提供的无数方法,终于有一个OK了…… 看到此文的同学别再被坑了…… 感谢:http ...

  8. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  9. 过去几个月出炉的30款最喜欢的 jQuery 插件

    在这篇文章中,我们收集了一些在过去的几个月里最喜欢的 jQuery 插件.为了使您更容易搜索到自己喜欢的 jQuery 插件,我们已经对插件进行了分类: 页面布局插件,图片和视频插件,滑块和画廊,排版 ...

  10. 25个最佳的 WordPress Gallery 画廊插件

    WordPress 画廊插件最适合用于作品展示网站,特别对于那些想以一个奇特的,现代的方式展示他们作品的摄影师.如果你想为你安装 WordPress Gallery 插件,那么下面的是你想要的. 本文 ...