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. Java_Shell多线程

    #!/bin/bash source ~/.bashrc fun(){ echo "fun is begin.timeNum:$timeNum" local timeNum=$ s ...

  2. 网络流最经典的入门题 各种网络流算法都能AC。 poj 1273 Drainage Ditches

    Drainage Ditches 题目抽象:给你m条边u,v,c.   n个定点,源点1,汇点n.求最大流.  最好的入门题,各种算法都可以拿来练习 (1):  一般增广路算法  ford() #in ...

  3. 【阿里云产品公测】一句话告诉你什么样的人该使用ACE，如何使用ACE

    作者:阿里云用户小鸡咕咕 首先回应标题,这一句话就是:看完这篇帖子你就知道了.     前言 写在文章之前,我想先阐述一下写这篇文章的意义.可能大伙就要说了,写这篇文章不就是为了200的代金券吗?错, ...

  4. 【Android车载系统 News | Tech 3】News 从手机征战到汽车 Android Auto对比CarPlay 2014-12-29

    Google和苹果都试图给用户的汽车带来一个安全和友好的移动体验.Android Auto和CarPlay是这两家公司推出的专为车载而重新设计的移动用户界面,双方目前都在筹备着在明年正式大规模推广. ...

  5. Android读取RAM,ROM,SD卡容量

    1)简介 一般人们在买手机的时候,在手机配置上都会出现"内存容量:512MB ROM+512MB RAM "等等类似这样的说明,可能很多人都知道RAM的意思就是运存的意思,但是对于 ...

  6. iOS - 网络 - NSURLSession

    1.NSURLSession基础 NSURLConnection在开发中会使用的越来越少,iOS9已经将NSURLConnection废弃,现在最低版本一般适配iOS,所以也可以使用.NSURLCon ...

  7. 1. RAID在数据库存储上的应用

    随着单块磁盘在数据安全.性能.容量上呈现出的局限,磁盘阵列(Redundant Arrays of Inexpensive/Independent Disks,RAID)出现了,RAID把多块独立的磁 ...

  8. javacv实战篇

    看到之前有248位小伙伴看我写的水文还是比较受鼓舞的,所以决定把这个细写一下: 就是javacv怎么实际应用一下: 其实无外乎导包,写测试代码. 这样 那我们先导包儿. javacv-1.2-bin( ...

  9. 一道简单的动态规划题目——House Robber

    一.题目 House Robber(一道Leetcode上的关于动态规划的简单题目)具体描述如下: There is a professional robber planning to rob hou ...

  10. GSS4 2713. Can you answer these queries IV 线段树

    GSS7 Can you answer these queries IV 题目:给出一个数列,原数列和值不超过1e18,有两种操作: 0 x y:修改区间[x,y]所有数开方后向下调整至最近的整数 1 ...