我们还可以通过background-size来控制背景图片的尺寸。

background-size有几个属性值,常用的是cover和contain。那么background-size:cover和contain二者之间有什么区别呢?

下面学做网站论坛就来介绍一下background-size cover和contain的区别和用法。

相同点:

可以控制背景图片,并且背景图片尺寸都是等比例缩放。

不同点:

background-size:cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示。

background-size:contain:正好相反,他是按照某一边来覆盖显示区域的,会有白边。

background-size cover和contain的用法详解的更多相关文章

  1. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

  2. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  3. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

  4. linux dd命令参数及用法详解---用指定大小的块拷贝一个文件(也可整盘备份)

    linux dd命令参数及用法详解---用指定大小的块拷贝一个文件 日期:2010-06-14 点击:3830 来源: 未知 分享至:            linux dd命令使用详解 dd 的主要 ...

  5. MultiByteToWideChar和WideCharToMultiByte用法详解, ANSI和UNICODE之间的转换

    //========================================================================//TITLE://    MultiByteToW ...

  6. selenium用法详解

    selenium用法详解 selenium主要是用来做自动化测试,支持多种浏览器,爬虫中主要用来解决JavaScript渲染问题. 模拟浏览器进行网页加载,当requests,urllib无法正常获取 ...

  7. Linux下find命令用法详解

    Linux下find命令用法详解   学神VIP烟火 学神IT教育:XueGod-IT   最负责任的线上直播教育平台   本文作者为VIP学员 烟火   第一部分:根据文件名查找   1.在当前目录 ...

  8. DAX/PowerBI系列 - 查询参数用法详解(Query Parameter)

    PowerBI  - 查询参数用法详解(Query Parameter) 很多人都不知道查询参数用来干啥,下面总结一下日常项目中常用的几个查询参数的地方.(本人不太欢hardcode的东西) 使用查询 ...

  9. lsof 命令用法详解

    lsof 命令用法详解 作用 用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所 ...

随机推荐

  1. BeyondCompare使用一段时间后会因“许可证密钥已被撤销:3281-0350“而无法使用

    解决方式: 1.用任意文本编辑软件打开“C:\Users\[Your User Name]\AppData\Roaming\Scooter Software\Beyond Compare 3\BCSt ...

  2. windows 共享文件

  3. Java面试题整理---Redis篇

    1.redis支持五种数据结构类型?   2.redis内部结构?   3.redis持久化机制?   4.redis集群方案与实现?   5.redis为什么是单线程的?   6.redis常见回收 ...

  4. ARM LCD屏调试3--屏的应用编程

    2011-06-25 19:20:47 驱动自己写完了,应用函数自己就不写了,找了一点代码参考,移植并修改了一下,配合之前的定义的接口文档,我贴出部分代码.目录: 一,开发环境... 1 二,底层函数 ...

  5. [ABP] ASP.NET Zero 5.6.0 之 ASP.NET Zero Power Tools 上手日志

    之前破解了这个工具后,却没有使用它. 现在使用这个小工具,帮我完成创建Entity类,Dto类,AppService类,View视图等DDD相关工作以及Entity Framework Migrati ...

  6. IDEA Failed to load dx.jar

    IDEA-177053 Android app crashes on build "Failed to load dx.jar" Error:Android Pre Dex: [c ...

  7. 指定Gpu range系列函数

    tensorflow指定GPU训练 import os os.environ[CUDA_VISIABLE_DEVICES] = '0,1'记住DEVICES是复数 range()返回的是range o ...

  8. js 实现json数组集合去重,差集,并集,交集。

    let list = [ { id: "1", content: "A" }, { id: "2", content: "B&qu ...

  9. HBuilder 模拟器

    模拟器名称    连接默认端口夜神安卓模拟器夜神安卓模拟器     62001逍遥安卓模拟器逍遥安卓模拟器     21503BlueStacks(蓝叠安卓模拟器)BlueStacks(蓝叠安卓模拟器 ...

  10. python coroutine

    1. Python Async/Await入门指南 2. 用 Python 3 的 async / await 做异步编程 3.