background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

提示：大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>背景图片大小</title>

<style type="text/css">

.demo {

    background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;

    width: 300px;

    height: 140px;

    border: 1px solid #999;

    background-size:cover;

}

</style>

</head>

<body>

<div class="demo"></div>

</body>

</html>

background-size 设置背景图片的大小的更多相关文章

  1. background-size （设置背景图片的大小）

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  2. CSS3设置背景图片的大小

    设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...

  3. qt 设置背景图片

    博客出处:http://www.cppblog.com/qianqian/archive/2010/07/25/121238.htm 工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和Q ...

  4. iOS下uiview和uiscrollview设置背景图片的源码

    1.uiscrollview 设置背景图片 // Setup the Scroll ViewUIScrollView*tempScrollView=(UIScrollView*)self.view;t ...

  5. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  6. css3-11 如何改变背景图片的大小和位置

    css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...

  7. Qt 设置背景图片3种方法（三种方法：QPalette调色板，paintEvent，QSS）

    方法1. setStylSheet{"QDialog{background-image:url()"}}  //使用styleSheet 这种方法的好处是继承它的dialog都会自 ...

  8. 为窗体设置背景图片-UI界面编辑器(SkinStudio)教程

    1.1.   为窗体设置背景图片 在窗体的Background属性中选择图片设置为窗体背景图片

  9. [Netbeans]为面板设置背景图片

    与AndroidStudio等类似IDE不同,在Netbeans开发桌面程序时,不可以直接通过src=@drawable 等方法为窗口设置背景图片.这里介绍一种简便的方法: 1:首先,拖动一个面板到f ...

随机推荐

  1. Linux下校验下载文件的完整性(MD5,SHA1,PGP)

    查看: Linux下校验下载文件的完整性(MD5,SHA1,PGP) http://blog.useasp.net/archive/2014/03/29/use-md5-sha1-or-pgp-to- ...

  2. Excel处理数据用到的一些公式和VBA脚本

    最近工作中用到EXCEL统计处理一些数据,正好之前有自学了一段时间的EXCEL,这次正好用上.为了加深印象,以后方便翻阅,就记录下来.这篇会不断补充. IF 多条件判断返回值 IF(logical_t ...

  3. 让Laravel5支持memcache的方法

    Laravel5框架在Cache和Session中不支持Memcache,看清了是Memcache而不是Memcached哦,MemCached是支持的但是这个扩展真的是装的蛋疼,只有修改部分源码让其 ...

  4. js的Touch事件

    js的touch事件,一般用于移动端的触屏滑动$(function(){document.addEventListener("touchmove", _touch, false); ...

  5. 属性通知之INotifyPropertyChanged

    为什么后台绑定的值改变了前台不发生变化了? 针对这个初学者很容易弄错的问题,这里介绍一下INotifyPropertyChanged的用法 INotifyPropertyChanged:用于绑定属性更 ...

  6. [Windows] Visual Studio 2010 快捷键大全

    Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O 打开文件 CTRL ...

  7. Java基础知识强化之集合框架笔记67：Hashtable的实现原理

    至于Hashtable的实现原理,直接参考网友的博客,总结很全面: 深入Java集合学习系列:Hashtable的实现原理

  8. 【￥200代金券、iPad等您来拿】 阿里云9大产品免费公测#10月9日－11月6日#

    #10.09-11.06#200元代金券.iPad大奖, 9大产品评测活动! 亲爱的阿里云小伙伴们: 云产品的多样性(更多的云产品)也是让用户深度使用云计算的关键.今年阿里云产品线越来越丰富,小云搜罗 ...

  9. git管理工具的使用教程

    Git入门教程 1.   概述     对于软件版本管理工具,为什么要选择Git?      你真正学会使用Git时, 你就会觉得这个问题的回答是非常自然的.然而当真正需要用文字来回答时,却觉得文字好 ...

  10. uva 10474 Where is the Marble? 计数排序

    题目给出一系列数字,然后问哪个数字是从小到大排在第几的,重复出现算第一个. 数据范围为10000,不大,完全可以暴力,sort不会超时. 但是由于以前做比赛时也遇到这种题目,没注意看数据范围,然后暴力 ...