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. docker 中运行 redis 服务

    先使用 dockerfile 创建一个 redis 容器 FROM ubuntu:latest RUN apt-get update RUN apt-get -y install redis-serv ...

  2. Inversions

    There are N integers (1<=N<=65537) A1, A2,.. AN (0<=Ai<=10^9). You need to find amount o ...

  3. 1.6.7 Detecting Languages During Indexing

    1. Detecting Languages During Indexing 在索引的时候,solr可以使用langid UpdateRequestProcessor来识别语言,然后映射文本到特定语言 ...

  4. 企业级搜索引擎Solr 第三章 索引数据（Indexing Data）[2]--DIH

    转载:http://quweiprotoss.wap.blog.163.com/w2/ DIH需要在solrconfig.xml中注册,如下: <requestHandler name=&quo ...

  5. spring + Quartz定时任务配置

    <bean id="exportBatchFileTask" class="com.ydcn.pts.task.ExportBatchFileTask"& ...

  6. MyEclipse设置编码方式 转载【http://www.cnblogs.com/susuyu/archive/2012/06/27/2566062.html】

    1.windows->Preferences……打开"首选项"对话框,左侧导航树,导航到general->Workspace, 右侧Text file encoding ...

  7. SharePoint 2010 配置基于MemberShip的身份验证

    场景:通常需要为sharepoint打通其他的系统整合到sharepoint认证,ad通常是为内部域用户,外网访问的可以使用membership来登录,那么这个既可以内部用户访问,外部用户也可以访问 ...

  8. C#垃圾回收机制

    C#属于托管的面相对象的语言,内存回收机制就是一个代表, C#有一套类似"全自动"的垃圾回收机制,也就是虚拟机会自动来判断执行内存的回收, 我们一般常用的Dispose(),Usi ...

  9. Every student in every school should have the opportunity to learn to code

    “I think everybody in this country should learn how to program a computerbecause it teaches you how ...

  10. Part 89 to 91 Talking about pass the parameters in thread

    Part 89   ParameterizedThreadStart delegate Use ParameterizedThreadStart delegate to pass data to th ...