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. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

  2. 项目源码--Android新闻财经类商用要求源码

    技术要点: 1. 商用要求源码框架 2. 登录与注册用户系统模块 3. Android的Http通信以及多线程处理模块 4. Andorid的网络数据处理模块 5. Andorid的版本检测与升级模块 ...

  3. 关于子线程使用Toast报错Can't create handler inside thread that has not called Looper.prepare()的解决办法

    形同如下代码,在Thread中调用Toast显示错误信息: new Thread(new Runnable(){ @Override public void run() { try{ weatherD ...

  4. Dispatcher中Invoke与BeginInvoke

    [同步]Invoke Application.Current.Dispatcher.Invoke(AutoIncreaseNumber); [异步]BeginInvoke Application.Cu ...

  5. 杂乱无章之Oracle（二）

    六.IMPDP用法 1.导入表 impdp hsiufo/hsiufo directory=dump_dir dumpfile=full.dmp tables=scott.emp remap_sche ...

  6. Android 高级UI设计笔记14：Gallery（画廊控件）之 3D图片浏览

    1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...

  7. 【HTML5 1】39个让你受益的HTML5教程

    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分 ...

  8. 判断某个对象是不是DOM对象

    在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有DOM ...

  9. VS2013 支持python和nodejs

    一.在VS2013中,安装python的支持 1. http://pytools.codeplex.com/下载插件 2. https://www.python.org/download/下载Pyth ...

  10. 10 个顶级 JavaScript 动画框架推荐

    使用JavaScript可以做出一些引人注目的动画效果,但通常不太容易实现.本文为你整理了10个非常优秀的JavaScript动画框架,使用它们你可以轻松实现动画效果.1. RaphaëlRaphaë ...