我们还可以通过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. 【CSS】css动画及过渡和变换属性

    1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...

  2. 2018-2019-2 《网络对抗技术》Exp2 后门原理与应用 20165215

    目录 实验内容 基础问题回答 常用后门工具 Netcat windows 获取 linux 的shell linux 获取 winsdows 的shell 使用nc传输数据 使用nc传文件 Socat ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 自制操作系统Antz(11)——实现shell(下)命令响应

    我已经规范了系统代码风格,类似于按照linux分包,把各部分功能区分开了 Antz系统更新地址 Linux内核源码分析地址 Github项目地址 在之前的任务中,我们已经通过直接操作显卡驱动完成了简单 ...

  5. 使用pynlpir增强jieba分词的准确度

    在使用jieba分词时,发现分词准确度不高.特别是一些专业词汇,比如堡垒机,只能分出堡垒,并不能分出堡垒机.这样导致的问题是很多时候检索并不准确. 经过对比测试,发现nlpir进行分词效果更好.但是n ...

  6. 18B20驱动小经验

    在写命令时P14拉高在最后 在读命令时P14在拉低后拉高

  7. node全局安装说明(create-react-app、)

    1.使用 create-react-app 快速构建 React 开发环境 国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: $ np ...

  8. 复旦高等代数II(18级)每周一题

    本学期将继续进行高等代数每周一题的活动.计划从第一教学周开始,到第十五教学周结束,每周的周末公布一道思考题(预计15道),供大家思考和解答.每周一题将通过“高等代数官方博客”(以博文的形式)和“高等代 ...

  9. linux清理缓存的命令

    查看缓存的命令 free -m 清理缓存的命令  echo 1 > /proc/sys/vm/drop_caches echo 2 > /proc/sys/vm/drop_caches e ...

  10. jQuery_$方法、属性、点击切换

    jQuery_$方法 1.$.each():遍历数组或对象中的数据 2.$.trim():去除字符串两边的空格 3.$.type(obj):得到数据的类型 4.$.isArray(obj):判断是否为 ...