我们还可以通过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. poj3373--Changing Digits(DFS+剪枝///记忆化)

    题目链接:点击打开链接 题目大意:给出一个n和一个k 求m 要求1.m要和n相同的位数 要求2.m要整除k 要求3.如果1和2满足,那么m要和n有尽量少的不同位 要求4.如果1.2.3满足,要使m尽量 ...

  2. selenium 定位密码软键盘

    from selenium import webdriver import time driver = webdriver.Chrome() driver.maximize_window() driv ...

  3. css3 样式过度器 Transition

    transition   简写属性,用于在一个属性中设置四个过渡属性. 1. transition 把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: eg: div{wi ...

  4. redis 在 php 中的应用(List篇)

    本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) 目录: List(列表) LPUSH LPUSHX RPUSH R ...

  5. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码

    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...

  6. 要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10;

    package text1; import java.util.ArrayList; import java.util.HashSet; /* * 要求产生10个随机的字符串, * 每一个字符串互相不 ...

  7. 自制操作系统Antz(13) 显示图片

    显示图片只是在多媒体课上看着bmp格式图片的突发奇想,然后就实现在了我自己的操作系统 Antz系统更新地址 Linux内核源码分析地址 Github项目地址 效果图: 显示图片的原理 在之前显卡操作时 ...

  8. PyGame实现情人节表白利器

    前提:写不出那么那个的话哇,随便写写,随便看看,重在代码(文章末尾有免费完整源代码) 实验环境: pygame 1.9.4 pycharm python3.6 实现思路: pygame.display ...

  9. [darknet]查看错误结果 sight of wrong

    import os import numpy import cv2 bad_label_file = open("bad_valid.list",'r') names = [] f ...

  10. Bigger-Mai 养成计划,前端基础学习之HTML

    HTML 超文本标记语言(Hyper Text Markup Language) 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ...