'cover': The smaller axies of image (x axies) should match smaller axies (x axies) of container. So some part of image might be cut off.

'container': The large axies of image (x or y) should match larger axies (x or y) of contaner. So that the whole image should be visible.

[CSS3] The different of Background-size between 'cover' and 'contain'的更多相关文章

  1. CSS3详解：background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  2. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

  3. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  4. css3之background

    background background: (1)url(image1.png) right bottom, (2)url(image2.png) center, (3)url(image3.png ...

  5. 前端小知识~~关于css3新增知识~~归纳总结

    1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:on ...

  6. HTML 学习笔记 CSS3 (背景)

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在CSS3里面 你可以在一个标签元素里应用多个 ...

  7. 深入了解——CSS3新增属性

    CSS3 选择器(Selector) 写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. C ...

  8. <转载>css3 概述

    参照 https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/ http://www.cnblogs.com/ghost-xyx/p ...

  9. css3新增功能

    CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 ...

  10. 【CSS3】 - 初识CSS3

    .navdemo{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; ...

随机推荐

  1. 设计模式之二十：责任链模式(Chain of Responsibility)

    感觉这个设计模式和组合模式一样是一种非常巧妙的设计模式,在须要使用它的地方假设不使用这样的设计模式代码会变的非常复杂,可是这样的设计模式的基本原理又是非常easy的. 责任链模式: 通过使多个对象都有 ...

  2. 第18题 Remove Element

    Given an array and a value, remove all instances of that value in place and return the new length. T ...

  3. NFS安装和配置

    ---------------------------------------------------------------------------------------------------- ...

  4. hdu5386 Cover

    Problem Description You have an n∗n matrix.Every grid has a color.Now there are two types of operati ...

  5. linux网络启动报错

    报错信息: shutting down interface eth0: error:device "eth0" (/org/freedsktop/networkMaager/Dev ...

  6. 本地 配置 Memcache

    如果帮到了您,可以支持一下,谢谢您的支持! Windows下的Memcache安装: 64bit:如果需要win64版,下载 memcached-win64-1.4.4-14.zip(直接下),里面有 ...

  7. jQuery幻灯片插件Owl Carousel

    简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...

  8. 蓝桥杯-- 历届试题 核桃的数量 （gcd）

      历届试题 核桃的数量   时间限制:1.0s   内存限制:256.0MB        问题描述 小张是软件项目经理,他带领3个开发组.工期紧,今天都在加班呢.为鼓舞士气,小张打算给每个组发一袋 ...

  9. 39.Qt XML

    1.使用QXmlStreamReader读取XML,可以读取内存中容纳不了的特大文件,或者读取在XML文档中定制的文档的内容. xml文件(in1.xml) <?xml version=&quo ...

  10. PHPMailer使用说明

    PHPMailer是一个用来发送电子邮件的函数包,远比PHP提供的mail()方便易用. 邮件格式说明 一封普通的电子邮件,通常是由发件人.收件人.抄送人.邮件标题.邮件内容.附件等内容构成.以下是一 ...