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左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  2. 乐观锁(optimistic locking)与悲观锁(pessimistic locking)

    首先,乐观锁(optimistic locking)与悲观锁(pessimistic locking)基本是针对数据处理来说,也就是跟数据库有关的术语,目的是为了解决并发处理时所遇到的相关性能问题,以 ...

  3. 关于 Android项目“error: Apostrophe not preceded by \ (”的解决方法

    用Eclipse环境开发Android项目,如果编译时控制台报出“error: Apostrophe not preceded by \ (”这种错误,那么多半是因为项目中的一个strings.xml ...

  4. UIImage图片处理，旋转、截取、平铺、缩放等操作

    来源:iOS_小松哥 链接:http://www.jianshu.com/p/9ab1205f5166 有时候我们需要处理图片,比如改变大小,旋转,截取等等,所以今天说一说图片处理相关的一些操作. 本 ...

  5. iOS获取设备型号

    导入头文件 #include <sys/types.h> #include <sys/sysctl.h> 直接调用 //获得设备型号 + (NSString *)getCurr ...

  6. Localizing WPF with .resx files

    WPF用Resource.resX中的字符串进行国际化 增加命名空间 xmlns:prop="clr-namespace:XXAppName.Properties" 引用的地方的格 ...

  7. Android小项目之三 splash界面

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...

  8. Kafka删除逻辑

    Kafka的删除逻辑请参见:http://www.cnblogs.com/gaopeng527/p/4950956.html

  9. 微软测试版Visual Studio for Mac下载

    地址:https://www.visualstudio.com/thank-downloading-visual-studio-mac/?sku=vsmac#

  10. MAC如何直接管理安卓手机文件（转）

    在PC上连接我的HTC ONE,还要装软件,每次想拷贝点XX还要开个虚拟机. 现在终于给找到好东西了,MAC 直接就能打开内存卡.比用PC 还简单. Android File Transfer-官网: ...